Sukka 写前端、网络和基础设施时，习惯先把边界和代价摊开。把「React 为什么重新渲染 | Sukka's Blog」整理成可落地的中文笔记：问题在哪、默认做法会踩什么坑、该怎么选。原站导航和广告已去掉。

TL; DR

这句话是 React 更新的公理， 不存在任何例外 。本文也将会围绕解释这句话展开。为了避免有人抬杠，这句话引入了一些限制定语和关键词：

在 React 中，「更新」和「重新渲染」是关系紧密，但是含义完全不同的两个词。下面这句话才能正确表达这两个词的正确含义：

名词解释

React 的「更新」包含三个阶段：渲染（Render），使用 createElement 或 jsx-runtime 产生全新的 React Element 对象、组装出一颗 React 树；Reconcilation，React Reconciler 比较 新生成的 React 树 和 当前的 React 树，判断如何用最高效的方法实现「更新」；Commit，操作 Host（如 DOM、Native 等），使新的 UI 呈现在用户面前。

大部分开发者会把「更新」和「重新渲染」混为一谈，因为在上述三个阶段中，只有「渲染」这一阶段是开发者可以控制的（「Reconcilation」和「Commit」分别由 react-reconciler 和 React Host 控制）。本文接下来的部分中，「重新渲染」一律指代 React 组件在「更新」时的「渲染」阶段，而「更新」则一律指代（重新）渲染、Reconcilation 和 Commit 整个过程。

状态更新和单向数据流

React Tree 本身可以在任意时候更新。实际上，如果你曾经通过 React 文档学习 React，你在「Hello World」一章就已经见过这个 Pattern 了：

const root = ReactDOM . createRoot ( document . getElementById ( 'root' ) ) ; function tick ( ) { const element = ( < div > < h1 > Hello, world! </ h1 > < h2 > It is { new Date ( ) . toLocaleTimeString ( ) } . </ h2 > </ div > ) ; root . render ( element ) ; // 如果你是在 React 18 发布以前学习的 React，你可能会用 ReactDOM.render()： // ReactDOM.render(element, document.getElementById('root')); } setInterval ( tick , 1000 ) ; 每秒钟调用一次 ReactDOM 提供的 render 使一整颗 React 树进行了完整的更新。但

不，和 props 完全没有关系

如果你在使用 React class 组件，那么你可以使用继承自 React.Component 的 forceUpdate 方法更新一个组件：

class MyComponent extends React . Component { handleInput ( ) { this . forceUpdate ( ) ; } } 因此，我们也可以把这句话改写成： 如果一颗 React 树中所有的 class 组件都没有使用 forceUpdate 方法，那么状态改变是这颗 React Tree 内部发生更新的唯一原因 。

纯组件和 memo

如果你去问一些使用 React 的开发者「为什么 React 会更新/重新渲染」，大概会得到这个答案。这句话不无道理，但是并不能反应真实的 React 更新机制。

本文只会介绍 React 为什么会发生更新，不会介绍如何避免「不必要」的更新（也许我会以这个为话题另外写一篇文章？）。

让我们谈谈 Context

const BigNumber = ( { number } ) => ( < div style = { { fontWeight : 700 , fontSize : 36 } } > { number } </ div > ) ; const Counter = ( ) => { const [ count , setCount ] = useState ( 0 ) ; const handleButtonClick = useCallback ( ( ) => setCount ( count => count + 1 ) , [ ] ) ; return ( < div > < BigNumber number = { count } /> < button onClick = { handleButtonClick } > Increment </ button > </ div > ) ; } ; const App = ( ) => ( < > < Counter /> < footer >

当我们点击按钮的时候， setCount 被调用、 count 状态发生改变，React 更新了 <Counter /> 组件。而 当 React 更新一个组件时，也会更新这个组件下的所有子组件 （至于为什么，很快就会讲的）。因此 <Counter /> 组件更新时，子组件 <BigNumber /> 也会更新。

值得单独记下的点

• React Hooks – Understanding Component Re-renders

落地时建议先做的 5 件事

1. 用自己的流量和设备测，不要只抄厂商推荐最小配置。
2. DNS、CDN、代理分流先画清 Fake IP 和 Real IP 的边界。
3. 前端性能看 CLS、白屏和重复渲染，而不是只看打包体积。
4. 基础设施变更走 Git，能复现、能回滚。
5. 结论写成可检查的清单：接口、超时、失败样本、回滚版本。

和智能体产品怎么接

龙虾PRO做 OpenClaw 落地时，网络、DNS 和前端性能笔记最有用的是「边界」：哪一层该加速、哪一层不该假装智能。数字员工调用外部能力前，先把超时和失败路径写死。

本文侧重全链路风控方法论。落地时请用自身业务单据做回放验证，不要把示例阈值直接当生产策略。 相关：风控体检 · 方案资源