React无props/state变更为何仍重渲染？重渲染概念存疑

为什么无props/state变更的组件会随父组件重渲染？ #

React的默认行为是：当父组件重渲染时，会递归触发所有子组件的重渲染流程，不管子组件自身的props或state有没有变化。你遇到的ExpensiveTree组件就是典型案例——它自身没有props或state的变更，但父组件App的state更新触发了重渲染，所以它的函数代码会被重新执行。

这是React的默认设计逻辑：父组件更新时，React会默认假设子组件可能依赖父组件的某些隐式状态（哪怕没通过props传递），因此会先执行子组件函数生成新的虚拟DOM，再进行后续对比。

重渲染的两个核心阶段 #

你对重渲染的两种理解完全正确，React里的“重渲染”确实分为两个独立阶段：

• 组件函数执行：这是第一个阶段，函数组件的代码会重新运行，生成新的虚拟DOM树。即便组件的props/state没变化，只要父组件重渲染，默认情况下这个阶段就会触发。你看到的输入卡顿，就是因为ExpensiveTree这个阶段的计算成本太高。
• DOM实际更新：这是第二个阶段，React会对比新旧虚拟DOM的差异，只有当虚拟DOM内容真正变化时，才会把差异同步到真实DOM上。如果组件props/state没变化，生成的虚拟DOM和之前一致，这个阶段就不会有实际的DOM操作，用户看不到UI变化，但组件函数已经执行过了。

优化方案 #

如果想让这类无依赖变更的子组件跳过不必要的函数执行阶段，可以用React.memo()包裹组件。它会浅对比组件前后的props，只有当props真正变化时，才会重新执行组件函数，否则直接复用之前的虚拟DOM结果。

内容的提问来源于stack exchange，提问作者Stefanie Gauss