React组件props变更却无父组件重渲染？重渲染规则存疑

先给明确结论 #

• 父组件重渲染（第3点）不涵盖自身props变更（第2点），二者是完全独立的触发场景
• props确实可以在父组件不重渲染的情况下发生变更

为什么父组件重渲染不包含props变更？ #

父组件重渲染时，会重新生成传递给子组件的props——哪怕这些props和之前的值在浅比较下是相等的，子组件默认也会触发重渲染。这种情况属于「父组件重渲染导致的子组件重渲染」，和「子组件props本身发生了实际变更」是两回事：

• 前者的核心触发原因是父组件的重渲染，子组件props可能根本没变化
• 后者的核心是子组件props发生了可检测的变化，不管这个变化来自哪里

父组件不重渲染时，props怎么变？ #

有几种常见的实际场景：

• 用React.cloneElement动态修改：父组件可以在不触发自身重渲染的事件回调（比如定时器、用户点击）里，通过React.cloneElement克隆已有的子组件实例，同时更新其props。这时候父组件本身没重渲染，但子组件的props已经变更。
• 状态管理库的局部订阅：比如使用Redux、Zustand这类库时，子组件可以直接订阅某个状态片段，当该状态更新时，子组件的props（绑定了这个状态）会变更，但父组件如果没订阅该状态，就不会触发重渲染。
• Context变更间接影响：如果子组件的props依赖上下文（Context），当Context的值更新时，订阅了该Context的子组件会感知到props变化，而未订阅该Context的父组件可能不会重渲染。
• 非规范的ref操作（不推荐）：虽然违背React单向数据流原则，但通过子组件的ref直接修改其props（比如类组件中childRef.current.props = newProps），也能实现父组件不重渲染但props变更的效果。

补充说明 #

React默认的重渲染逻辑里，四个触发场景是并列关系，没有包含关系，每一种都能独立触发子组件的重渲染：

• 自身state变更 → 重渲染
• 自身props发生浅比较可检测的变化 → 重渲染
• 父组件重渲染 → 子组件默认重渲染（不管props是否变化）
• 依赖的Context变更 → 重渲染

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