react 如何渲染的
React 渲染机制
React 的渲染过程分为两个主要阶段：协调（Reconciliation）和提交（Commit）。协调阶段负责计算虚拟 DOM 的差异，提交阶段将变更应用到真实 DOM。
虚拟 DOM 的作用
React 使用虚拟 DOM 来优化渲染性能。虚拟 DOM 是一个轻量级的 JavaScript 对象，表示真实 DOM 的结构。当组件状态或属性发生变化时，React 会重新生成虚拟 DOM 树，并与之前的虚拟 DOM 进行对比（Diffing 算法），找出需要更新的部分。
Diffing 算法
React 的 Diffing 算法基于以下假设：
- 不同类型的元素会生成不同的树。
- 通过
key属性标识子元素，提高比对效率。
算法会递归比较树的节点，仅更新发生变化的节点，而不是重新渲染整个树。
组件更新触发条件
触发重新渲染的条件包括：
- 组件状态（
state）发生变化。 - 父组件重新渲染导致子组件的属性（
props）更新。 - 使用
forceUpdate()强制更新（不推荐）。
渲染流程示例
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 创建虚拟 DOM 并转换为真实 DOM。
- 点击按钮后，
setCount触发状态更新。 - React 重新生成虚拟 DOM，与之前的虚拟 DOM 进行比对。
- 仅更新
p标签中的文本内容，而不是整个组件。
性能优化方法
React.memo：避免不必要的子组件渲染。useMemo/useCallback：缓存计算值或函数，减少重复计算。- 避免内联函数/对象：防止子组件因引用变化而重新渲染。
生命周期与渲染
函数组件使用 useEffect 处理副作用，类组件通过生命周期方法（如 componentDidUpdate）控制渲染行为。useEffect 的依赖数组可以精确控制副作用的触发时机。
useEffect(() => {
console.log('Count updated:', count);
}, [count]); // 仅在 count 变化时执行
