迷茫之中还是写写文章，沉淀一下。如果你处于迷茫之中，不如来看看这篇总结分析是否到位。
黎明前的黑暗，不可以倒在“最后一公里”的上坡路的地方。
目录结构图
Vue 与 React 的核心区别
水合（Hydration）与合成事件（Synthetic Events）
React Fiber 架构详解
中间层解耦：前后端通信桥梁
React Hooks 与工具函数（Utils）的区别
React 18 的新特性
useCallback 与 useMemo 的使用场景
受控组件与非受控组件的区别
React 的状态管理方式
Redux 与 useState/useEffect 的差异
事件总线（EventBus）的实现与应用
Vue 和 React 的区别
从多个维度展开：
设计理念
Vue：作为渐进式框架，Vue 专注于业务逻辑，通过指令和组件来扩展功能。其核心是响应式系统，利用数据驱动视图的更新。Vue 能够自动跟踪依赖，Vue 3 使用 Proxy 替代了 Object.defineProperty，性能更优。
React：专注于组件化开发，通常需要结合其他库（如 Zustand、Redux 等）来构建完整应用。状态更新需要显式调用 useState，依赖手动操作。
代码层面
Vue：采用单文件组件（.vue），将模板、样式和逻辑封装在一个文件中，提高了代码的可读性和可维护性。
React：使用 Hooks（如 useState、useEffect）管理状态和副作用，强调逻辑复用和组合。类组件是传统方式，逐渐被 Hooks 替代，依赖生命周期方法。
数据流和状态管理
Vue：使用 v-model 实现数据双向绑定，简化了表单处理。底层是单向数据流加事件监听的语法糖。
React：使用 useState 和 useEffect 实现数据流和状态管理，依赖收集，数据变化时视图更新。
水合（Hydration）与合成事件（Synthetic Events）
水合（Hydration）
水合是指服务器生成的静态 HTML 与客户端 JavaScript 事件处理程序和状态结合的过程。服务器生成的 HTML 包含了事件处理程序和状态，客户端 JavaScript 负责将这些信息与 DOM 进行关联，使得用户交互能够正常工作。
React 实现方式：
React 18 以前：ReactDOM.hydrate(element, container)
React 18 以后：hydrateRoot(container, element)
合成事件机制（Synthetic Events）
合成事件是 React 特有的事件处理系统：
定义：React 将原生 DOM 事件包装成合成事件对象，统一绑定到根节点（document）。
工作原理：
事件委托：所有事件都委托到根节点，而不是直接绑定到 DOM 元素。
事件池：重用事件对象，减少内存消耗。
事件分发：根据事件冒泡路径，找到对应组件并执行其事件处理函数。
主要区别
目的不同：
水合：解决 SSR 与客户端渲染的衔接问题。
合成事件：解决跨浏览器兼容性和性能优化问题。
作用范围：
水合：整个应用的生命周期中只发生一次。
合成事件：贯穿应用的整个生命周期。
技术领域：
水合：服务端渲染与客户端渲染的桥梁。
合成事件：前端事件处理系统。
Fiber 机制
React 的 Fiber 架构引入了增量渲染、优先级调度和双缓存树的概念。
增量渲染：将渲染任务分割成多个小任务，配合优先级调度机制，让高优先级的任务（如用户输入）可以中断低优先级的任务（如大列表渲染），提升用户体验。
双缓存树设计：在内存中同时存在两棵树：当前页面对应的树（current 树）和正在构建的树（workInProgress 树）。这种机制让 React 可以在后台准备新的树，完成后再一次性替换到屏幕上，避免中间状态造成的视觉问题。
更新过程分为两个阶段：
Render 阶段：构建 Fiber 树和标记副作用，这个阶段是可以被中断的。
Commit 阶段：将变更应用到 DOM 上，这个阶段必须一次性完成，不能中断。
中间层解耦
中间层是介于前端和后端之间的一层，用于处理前端和后端之间的通信和数据传输。
功能：
处理接口的新旧版本兼容。
支持多端数据。
性能优化，如减少请求次数、缓存处理。
错误和日志记录，便于问题追踪和分析。
React Hooks 与 Utils 的区别
React Hooks：Hooks 是 React 16.8 新增的特性，允许在函数组件中使用状态和其他 React 特性，打破了函数组件只能渲染 UI，不能使用状态和生命周期的限制。通常以 use 开头，如 useState、useEffect、useContext 等。
例如，useContext 用于组件树传递上下文（context），避免通过逐层传递 props 的麻烦。
Utils：指的是开发者自己编写的一些工具函数，用于解决特定问题，实现某些逻辑，减少重复代码。这些函数不依赖于 React 的生命周期，可以在任何 JavaScript 环境中使用。
React 18 新特性
React 18 引入了多项新特性，旨在提升性能和开发体验：
异步渲染：引入并发渲染（Concurrent Rendering），允许 React 根据任务优先级中断和恢复渲染，提高应用响应速度。
Canvas 渲染功能：提供了通过 Canvas 渲染组件的能力，适用于需要高性能图形渲染的场景。
Suspense for Server：增强了服务器端渲染（SSR）对异步组件加载的支持，使得服务器渲染可以更好地处理异步数据加载。
重写 Fiber 架构：提升了性能，支持渲染任务的中断和恢复，优化了用户体验。
useCallback 与 useMemo
useCallback：用于缓存函数，避免每次渲染都创建新函数，从而减少函数创建成本，提升性能，减少子组件不必要的渲染。使用方式：useCallback(fn, deps)，当依赖项 deps 改变时，重新创建函数。
使用场景：
当函数作为 props 传递给子组件时，避免子组件因函数引用变化而重新渲染。
优化事件处理函数，避免不必要的函数重新创建。
注意事项：useCallback 本身存在开销，需要维护一个缓存，并且每次渲染都要检查依赖项是否变化。如果子组件渲染不是性能瓶颈，或函数依赖变化少，使用 useCallback 可能会增加不必要的开销，增加代码复杂性和维护成本。
useMemo：用于缓存计算结果，避免每次渲染都进行重复计算，提升性能。使用方式：useMemo(fn, deps)，当依赖项 deps 改变时，重新计算值。
使用场景：
当组件中存在复杂的计算逻辑（如数组排序、数据处理等），且这些计算依赖于某些变量时，可以使用 useMemo 缓存结果。
当计算结果作为子组件的 props 时，useMemo 可以防止子组件因父组件的重新渲染而进行不必要的更新。
受控与非受控组件
受控组件：通过 state 控制组件状态，通过 onChange 事件更新 state，通过 state 渲染组件。可以通过代码修改表单的 value，适合需要表单校验、动态控制等场景。
非受控组件：通过 ref 获取 DOM 节点，直接操作 DOM 节点。只有用户能够改变 value，不能通过代码修改 value；但可以设置 defaultValue 初始值，通过 ref 获取 DOM 节点，操作 DOM 节点。适合文件上传、简单表单等场景。
一般来说，只要用户输入，不手动修改表单值，使用非受控组件即可。
受控组件与非受控组件的性能差异
受控组件：每次用户输入都会触发状态更新和组件渲染，可能导致性能开销。
非受控组件：减少了不必要的状态更新和渲染，性能更优，但不适合复杂的表单验证场景。
React 如何进行状态管理？为什么需要状态管理？
内置方案：
useState：适用于简单状态管理。
useReducer：适用于更复杂的状态逻辑。
useContext（Context API）：用于跨组件共享状态。掘金
第三方方案：
Redux：全局状态管理，适用于大型应用。
Zustand：轻量级状态管理库，使用简单，性能优越。知乎+3掘金+3Reddit+3
状态管理的作用：
实现组件通信：父子组件通过 props，自定义事件；兄弟组件通过状态提升或事件总线；跨层组件通过 Context API。
状态共享：统一数据源，减少重复请求。
处理复杂逻辑：通过状态机制管理，实现高效共享和同步更新。
示例代码：
const UserContext = React.createContext();
// 提供状态
function App() {
return (
<UserContext.Provider value={{ name: 'zhangsan' }}>
<Child />
</UserContext.Provider>
);
}
// 消费状态
function Child() {
const { name } = useContext(UserContext);
return <div>{name}</div>;
}
Redux 与 useState/useEffect 的区别
Redux：
全局状态管理，适用于大型应用。
支持状态历史跟踪。
通过中间件（如 redux-thunk）处理异步操作。
支持状态持久化（如 redux-persist）。
Zustand：
轻量级，性能优越。
使用 create 创建状态管理器（store），定义状态和修改方法。
通过 useStore hook 在组件中访问和更新状态。
事件总线（EventBus） ：
基于发布-订阅通信机制，允许通过一个中央事件中心存储事件和对应回调函数。
on 订阅事件，emit 发布（触发）事件，off 取消订阅（解绑）。
注意：订阅和发布分离，订阅者不知道发布者存在，订阅者也不知道发布者发布什么事件，可能导致维护困难。
实现方式：父组件通过调用事件总线的 emit 方法触发事件，并传递数据。子组件通过调用事件总线的 on 方法订阅事件，并注册回调函数来响应事件。子组件在卸载时需要调用 off 方法解绑事件，以避免内存泄漏。
作者：ys指风不买醉
链接：https://juejin.cn