React中props变更是否会触发组件重新渲染？

澄清一个常见误区 #

所谓"props变更触发组件重渲染"是简化表述，本质上props本身的变更不会直接触发子组件重渲染——子组件重渲染的直接触发原因是父组件发生了重渲染，而父组件重渲染几乎都是因为自身的state通过useState/useReducer发生了更新（引用产生变化）。

关于state的重渲染逻辑 #

React对state的检测依赖引用变化：

• 直接修改state对象的字段（比如state.key = newValue），因为state的引用没有改变，React无法感知到变化，不会触发重渲染。
• 使用useState的更新函数时，React会创建新的状态引用（比如setState(prev => ({...prev, key: newValue}))），当引用发生变化时，React触发当前组件的重渲染。

关于props的重渲染逻辑 #

当你修改props对象的某个字段时，是否触发重渲染分两种情况：

1. props来自父组件的state
   • 若你通过父组件的setState更新了该state对象（创建新引用），父组件会先重渲染，进而触发子组件重渲染。此时子组件会对比新旧props的引用/值，若发现变化则更新视图。
   • 但如果直接修改父组件state对象的字段（不通过setState），state引用未变，父组件不会重渲染，子组件自然也不会更新。
2. props来自全局变量/父组件的普通变量
   • 这类变量的变更不在React的状态追踪范围内，修改它们的字段不会触发任何组件的重渲染，这也是你实验中组件不更新的原因——React根本不知道这个变量变了。

正确让props变更触发重渲染的方式 #

如果希望某个对象的字段变化能触发子组件更新，必须将该对象存入父组件的state中，通过useState的更新函数创建新的对象引用，比如：

// 父组件中
const [user, setUser] = useState({ name: "Alice", age: 20 });

// 修改字段时创建新引用
const updateAge = () => {
  setUser(prev => ({ ...prev, age: prev.age + 1 }));
};

// 传递给子组件
<Child user={user} />

此时父组件因state更新重渲染，子组件拿到新的user props，进而触发视图更新。

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