react的底层实现
React 的底层实现原理
React 的核心实现基于虚拟 DOM（Virtual DOM）、协调算法（Reconciliation）和 Fiber 架构。这些技术共同作用，使得 React 能够高效地更新用户界面。
虚拟 DOM（Virtual DOM）
虚拟 DOM 是 React 的核心概念之一，它是一个轻量级的 JavaScript 对象，用于描述真实 DOM 的结构。虚拟 DOM 的优势在于避免了直接操作真实 DOM 的高成本操作。
- 虚拟 DOM 的结构：虚拟 DOM 是一个树形结构，每个节点代表一个 DOM 元素或组件。节点包含标签名、属性、子节点等信息。
- 虚拟 DOM 的更新：当状态或属性变化时，React 会生成新的虚拟 DOM 树，并与旧的虚拟 DOM 树进行比较（Diffing 算法），找出需要更新的部分。
协调算法（Reconciliation）
协调算法是 React 用于比较新旧虚拟 DOM 树的机制，确定哪些部分需要更新。
- Diffing 算法：React 采用启发式算法，假设相同类型的组件会产生相似的树结构，不同类型的组件会产生不同的树结构。通过逐层比较节点，React 可以高效地找出差异。
- Key 的作用：在列表渲染时，
key帮助 React 识别哪些元素是新增、删除或移动的，从而优化更新性能。
Fiber 架构
Fiber 是 React 16 引入的新架构，旨在解决大型应用中的性能问题，支持增量渲染和任务调度。
- Fiber 节点：每个 Fiber 节点对应一个虚拟 DOM 节点，包含组件的类型、状态、子节点等信息。Fiber 节点构成一个链表结构，便于遍历和中断。
- 任务调度：Fiber 架构将渲染任务拆分为多个小任务，允许 React 在浏览器空闲时执行任务，避免阻塞主线程（基于
requestIdleCallback）。 - 优先级机制：Fiber 支持为不同任务分配优先级，确保高优先级任务（如用户交互）优先执行。
React 的渲染流程
React 的渲染流程分为两个阶段：渲染阶段（Render Phase）和提交阶段（Commit Phase）。
渲染阶段
渲染阶段是异步的，React 会遍历 Fiber 树，构建或更新虚拟 DOM。
- 工作循环：React 从根 Fiber 节点开始，递归遍历子节点，生成或更新 Fiber 树。
- 副作用收集：在遍历过程中，React 会标记需要执行的副作用（如 DOM 更新、生命周期调用）。
提交阶段
提交阶段是同步的，React 将渲染阶段收集的副作用应用到真实 DOM。
- DOM 更新：React 根据副作用列表，批量更新真实 DOM。
- 生命周期调用：执行
componentDidMount、componentDidUpdate等生命周期方法。
React Hooks 的实现
React Hooks 是 React 16.8 引入的功能，允许函数组件使用状态和其他 React 特性。
- Hooks 链表：每个函数组件的 Hooks 以链表形式存储，React 通过顺序调用 Hooks 确保状态的一致性。
- 状态存储：
useState和useReducer的状态存储在 Fiber 节点的memoizedState属性中。 - 副作用处理：
useEffect和useLayoutEffect的副作用在提交阶段执行。
事件系统
React 的事件系统是合成事件（SyntheticEvent），跨浏览器兼容且高效。
- 事件委托：React 将所有事件委托到顶层容器（如
document），通过事件冒泡捕获目标事件。 - 事件池：合成事件对象会被复用，以减少内存分配和垃圾回收的开销。
性能优化
React 提供了多种性能优化手段，如 React.memo、useMemo 和 useCallback。
React.memo：用于函数组件的浅比较，避免不必要的重新渲染。useMemo和useCallback：缓存计算结果和函数引用，减少重复计算和子组件更新。
通过以上机制，React 实现了高效、灵活的 UI 更新和渲染。
