react是如何更新页面的
React 更新页面的核心机制
React 通过虚拟 DOM（Virtual DOM）和协调（Reconciliation）机制高效更新页面。当组件状态或 props 发生变化时，React 会触发重新渲染流程。
触发更新的条件
- 状态变更：通过
useState或useReducer等 Hook 修改状态。 - Props 变更：父组件重新渲染导致子组件接收新的 props。
- 上下文变更：使用
useContext的组件在 Context 值变化时更新。 - 强制更新：类组件中调用
this.forceUpdate()（不推荐）。
虚拟 DOM 的比对过程
- 生成新虚拟 DOM：组件重新渲染时会生成新的虚拟 DOM 树。
- Diff 算法：React 使用启发式算法比较新旧虚拟 DOM，找出最小变更集。
- 同级节点按 key 对比，无 key 时按顺序比对可能性能下降。
- 节点类型不同时直接销毁旧树并重建新树。
- 生成更新指令：将差异转化为真实的 DOM 操作（如
appendChild、remove）。
提交阶段
React 将计算出的 DOM 更新批量提交到浏览器渲染引擎，避免频繁重排重绘。通过 Fiber 架构的调度机制，可将更新拆分为多个小块以避免阻塞主线程。
性能优化手段
- React.memo：缓存组件，避免不必要的重新渲染。
- useMemo/useCallback：缓存计算结果或函数，减少子组件更新。
- key 属性：列表项添加稳定 key 帮助 React 识别元素变化。
- 批量更新：React 18 默认自动批处理状态更新，减少渲染次数。
代码示例（状态更新触发渲染）：
function Counter() {
const [count, setCount] = useState(0);
// 点击按钮触发状态更新 -> 重新渲染
return (
<button onClick={() => setCount(c => c + 1)}>
Count: {count}
</button>
);
}Fiber 架构的作用
React 16 引入的 Fiber 架构将渲染工作拆分为可中断/恢复的单元，使得：
- 高优先级更新（如用户输入）可打断低优先级渲染
- 支持并发模式下的渐进式渲染
- 通过时间切片（Time Slicing）避免长时间阻塞主线程
整个过程对开发者透明，但理解其原理有助于编写高性能 React 应用。
