React中如何监听props变化？useEffect未触发求解决方案

1. 检查全局状态更新是否遵循不可变原则 #

如果你的全局state是直接修改原对象的方式更新（比如state.version = 'v2'），React无法检测到变化——因为React依赖引用变化判断状态更新。必须返回新的状态对象：

// 错误写法：直接修改原对象
globalState.version = 'v2';

// 正确写法：创建新对象（以React.useState为例）
setGlobalState(prevState => ({
  ...prevState,
  version: 'v2' // 或prevState.version + 1
}));

只有这样，MyComponent接收到的state才会是新引用，state.version的变化才能被useEffect的依赖数组检测到。

2. 确认组件是否被React.memo包裹导致浅比较未通过 #

如果MyComponent用了React.memo，默认浅比较会认为同一引用的state props无变化，即使内部version值已更新。解决方法：

• 要么更新全局状态时返回新的state对象（同第1点），让浅比较识别变化；
• 要么给React.memo传自定义比较函数，明确对比version字段：

export default React.memo(MyComponent, (prevProps, nextProps) => {
  // version相同时返回true（不重新渲染），否则返回false
  return prevProps.state.version === nextProps.state.version;
});

3. 验证props是否确实传递了更新后的值 #

在MyComponent中添加实时日志，确认渲染时state.version是否真的变化：

const MyComponent = ({state}) => {
  console.log('当前渲染的version:', state.version);

  useEffect(() => console.log('state version is ' + state.version), [state.version])

  return <></>
}

如果这里打印的version没变化，说明全局状态更新逻辑有问题，或者props传递链路中某个环节未正确传递更新。

4. 特殊情况：state.version是引用类型 #

如果state.version是对象/数组这类引用类型，即使内部值变化，引用未改的话useEffect也不会触发。这时候可以：

• 更新时返回新的version引用（比如version: {...prevVersion, num: 2}）；
• 或者在依赖数组里使用具体属性值（比如[state.version.num]）；

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