react怎么知道如何更新
React 的更新机制
React 通过虚拟 DOM（Virtual DOM）和协调算法（Reconciliation）来确定如何高效更新 UI。以下是其核心原理：
虚拟 DOM 的生成
当组件的状态或属性发生变化时，React 会重新渲染该组件及其子组件。渲染过程生成一个新的虚拟 DOM 树，而不是直接操作真实 DOM。虚拟 DOM 是一个轻量级的 JavaScript 对象，表示 UI 的当前状态。
Diffing 算法
React 使用 Diffing 算法比较新旧虚拟 DOM 树的差异。算法通过以下策略优化性能：
- 同级比较：React 默认逐层比较节点，不会跨层级移动节点。
- Key 属性：为列表项提供唯一的
key帮助 React 识别节点的唯一性，避免不必要的重新渲染。 - 组件类型判断：如果组件类型不同（例如从
div变为span），React 会直接销毁旧组件及其子树，创建新组件。
更新提交
Diffing 完成后，React 生成一个最小化的更新操作集合（如添加、删除或修改节点），通过 React DOM 或其他渲染器（如 React Native）将这些变更应用到真实 DOM 上。
触发更新的条件
以下情况会触发 React 的更新流程：
- 状态变更：通过
setState或useState更新状态。 - 属性变更：父组件重新渲染导致子组件的属性变化。
- 上下文变更：组件订阅的上下文（Context）值发生变化。
- 强制更新：调用
forceUpdate（不推荐使用）。
性能优化手段
React 提供以下方式避免不必要的更新：
- React.memo：缓存函数组件，仅在属性变化时重新渲染。
- shouldComponentUpdate：类组件中手动控制是否更新。
- useMemo/useCallback：缓存值和函数，减少子组件的不必要渲染。
通过虚拟 DOM 和高效的 Diffing 策略，React 确保了 UI 更新的高性能和可预测性。
