为什么你需要理解 React 渲染机制
从调度、协调到提交，理解 React 渲染的完整生命周期，是排查一切性能问题的起点。
大多数时候我们写 React 像在搭积木：组件一摆，界面就出来了。但当页面开始卡顿、状态开始“莫名跳变”，你就必须回到那个底层问题——
## 渲染到底何时发生
React 的渲染分两个阶段：**Render 阶段**（计算出新的虚拟 DOM）和 **Commit 阶段**（把差异应用到真实 DOM）。理解这条分界线，80% 的“玄学 bug”都能解释。
```jsx
function Counter() {
const [n, setN] = useState(0);
console.log("render", n);
return <button onClick={() => setN(n + 1)}>{n}</button>;
}
```
点击按钮后 console.log 打印两次：一次是状态更新触发的重渲染，一次是 StrictMode 的故意双调用。
## 三个关键结论
- 父组件重渲染，默认所有子组件都会重渲染，无论 props 是否变化
- `setN(n + 1)` 连调三次并不会渲染三次——React 会把更新合并成一次
- `key` 不是性能优化，而是身份标识；用数组下标做 key 是在给未来的自己埋雷
## 下一步
下一章我们进入 useEffect，看看依赖数组背后真正的“闭包陷阱”。