渲染和提交

当你的应用发生变化时，React 会做两件事：先计算应该显示什么（渲染 Render），再把变化应用到页面（提交 Commit）。 了解这两个阶段，能帮助你写出稳定、性能更好的组件。

什么会触发渲染？

• State 更新（例如 setState）
• 父组件重新渲染导致子组件也渲染
• Context 值变化（见 Context）

渲染阶段：只负责“算 UI”

一个“纯粹”的渲染函数像数学函数：相同输入得到相同输出。

function Greeting({ name }: { name: string }) {
  return <h1>你好，{name}</h1>;
}

为什么渲染必须纯粹？

React 可能会在提交前重复渲染（例如开发环境的严格模式、并发渲染策略）。 如果你在渲染时做了副作用，就可能出现“渲染一次却执行多次”的奇怪 bug。

let called = 0;

function Bad() {
  called = called + 1;
  return <p>我被渲染了 {called} 次</p>;
}

提交阶段：把变化真正更新到页面

当 React 决定“这一帧可以提交了”，才会把渲染结果应用到 DOM，并触发生命周期/Effect。 这也是为什么你能在 Effect 里安全地与外部系统同步。

import { useEffect, useState } from 'react';

function Good() {
  const [called, setCalled] = useState(0);

  useEffect(() => {
    setCalled((c) => c + 1);
  }, []);

  return <p>组件挂载次数：{called}</p>;
}

下一步

• 想理解“更新 State 后为什么不是立即生效”，看 State：组件的记忆。
• 想学习如何同步外部系统（订阅、网络、定时器），看 使用 Effect 同步。