React父组件重渲染时，无props变化的子组件是否需重渲染？

先明确现象 #

在React中，父组件触发重渲染时，默认所有子组件都会跟着执行渲染逻辑——哪怕子组件没有接收任何props，或者props完全没有变化。比如你做的实验里，父组件更新时间状态导致重渲染，两个<TheTimeNow />组件虽然没传props，依然会执行渲染并输出新的时间。

这里要澄清一个误区：子组件重渲染不等于DOM会被全量更新。React会通过对比新旧虚拟DOM（VDOM），只修改实际需要变更的最小DOM节点。你可以通过Chrome开发者工具观察到，只有时间文本节点会更新，其余节点保持不变；而原生JS直接替换节点的实现会更新整个容器内的所有节点。

核心问题解答 #

1. 当子组件props未变化时，是否真的无需重渲染？

从组件的功能逻辑来说，确实不需要。因为React组件的输出仅由props和内部state决定——如果两者都没有变化，组件的渲染结果必然完全一致，重复执行渲染逻辑属于无意义的计算开销。尤其是当子组件本身很复杂，或者子组件树层级很深时，这种无意义的重渲染会累积成性能问题。

2. 为什么React默认要让这类子组件重渲染？

React的默认策略是优先保证开发体验的简单性和UI的可预测性，而非极致性能，原因有两点：

• 避免额外的比较开销：如果React默认要判断子组件是否需要重渲染，就得对每个子组件的props做比较（浅比较甚至深比较），这本身会带来额外的计算成本。对于大多数简单组件来说，直接重渲染的开销反而比做比较更小。
• 覆盖所有场景：子组件的渲染逻辑可能依赖props之外的因素——比如父组件的Context、组件内部的状态、或者全局状态（如Redux）。如果仅通过props是否变化来判断是否重渲染，会漏掉这些场景，导致UI无法同步更新。默认全量重渲染能最大程度保证UI始终和数据状态一致。

优化方案 #

如果确实遇到了无意义重渲染导致的性能瓶颈，可以通过以下手段优化：

• 函数组件：用React.memo()包裹组件，它会对props做浅比较，只有当props变化时才触发重渲染；如果需要深比较，可以传入自定义的比较函数。
• 类组件：要么重写shouldComponentUpdate()方法，自定义重渲染的判断逻辑；要么直接继承PureComponent，它会自动对props和state做浅比较。

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