react 如何渲染的
React 渲染机制
React 的渲染过程分为两个主要阶段：协调（Reconciliation）和提交（Commit）。协调阶段负责计算 DOM 的变更，提交阶段将变更应用到实际 DOM 上。
虚拟 DOM 的作用
React 使用虚拟 DOM（Virtual DOM）作为中间层。当组件的状态或属性变化时，React 会生成新的虚拟 DOM 树，并与旧的虚拟 DOM 树进行比较（Diffing 算法），找出需要更新的部分。
Diffing 算法
React 的 Diffing 算法基于以下假设：
- 不同类型的元素会生成不同的树结构。
- 通过
key属性标识子元素，提高复用效率。
比较过程从根节点开始，递归遍历子节点：
- 元素类型不同：直接卸载旧树，构建新树。
- 元素类型相同：保留 DOM 节点，仅更新变化的属性。
- 子节点对比：通过
key匹配新旧子节点，减少不必要的重新创建。
提交阶段
在协调阶段完成后，React 会将所有变更批量提交到真实 DOM。这一阶段分为三个子阶段：
- Before Mutation：调用
getSnapshotBeforeUpdate生命周期（如果存在）。 - Mutation：更新 DOM 并执行副作用。
- Layout：调用
componentDidMount或componentDidUpdate生命周期。
性能优化策略
- 避免不必要的重新渲染：使用
React.memo、shouldComponentUpdate或PureComponent。 - 稳定的
key：避免使用数组索引作为key，防止子元素意外重新创建。 - 批量更新：React 自动批量处理状态更新，减少渲染次数。
示例代码
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}异步渲染与并发模式
React 18 引入了并发模式（Concurrent Mode），允许渲染过程可中断。通过 startTransition 或 useDeferredValue 标记非紧急更新，提高用户体验。
import { startTransition } from 'react';
function handleInputChange() {
startTransition(() => {
// 非紧急更新
setSearchQuery(input);
});
}总结
React 的渲染机制通过虚拟 DOM 和 Diffing 算法最小化 DOM 操作，结合批量更新和并发模式优化性能。开发者可通过合理使用 key 和优化策略进一步提升应用效率。
