react怎么知道如何更新
React 的更新机制
React 通过虚拟 DOM（Virtual DOM）和高效的 diff 算法来确定如何更新实际的 DOM。以下是 React 更新机制的核心原理：
虚拟 DOM 的作用
虚拟 DOM 是一个轻量级的 JavaScript 对象，它是真实 DOM 的抽象表示。每次状态或 props 发生变化时，React 会重新生成一个新的虚拟 DOM 树。
Diff 算法（协调过程）
React 使用 diff 算法比较新旧虚拟 DOM 树的差异。这一过程称为“协调”（Reconciliation）。diff 算法会高效地找出需要更新的部分，而不是直接重新渲染整个 DOM。
- 树对比：React 会逐层比较虚拟 DOM 树的节点。如果节点类型不同（例如从
div变为span），React 会直接销毁旧节点及其子树，并创建新节点。 - 列表对比：对于列表元素（如
map生成的子元素），React 会使用key属性来识别哪些子元素是新增、移动或删除的。
更新阶段
React 的更新分为两个阶段：
- 渲染阶段：生成新的虚拟 DOM 树并计算差异。
- 提交阶段：将差异应用到真实 DOM 上。
状态更新与批处理
React 会对状态更新进行批处理，避免频繁触发渲染。例如，在事件处理函数中多次调用 setState，React 会合并这些更新为一次渲染。
性能优化
React 提供了以下方式优化更新：
shouldComponentUpdate：类组件中可以通过此生命周期方法手动控制是否更新。React.memo：用于函数组件，避免不必要的重新渲染。useMemo和useCallback：缓存值和函数，减少子组件的重新渲染。
Fiber 架构
React 16 引入的 Fiber 架构进一步优化了更新过程。Fiber 将渲染工作拆分为多个小任务，允许 React 在空闲时间执行部分工作，避免阻塞主线程。
通过以上机制，React 能够高效地确定需要更新的部分，并最小化对真实 DOM 的操作。
