React useEffect如何检测依赖值变化？含基本类型匹配逻辑疑问

你的核心疑问澄清 #

你真正想问的不是React用什么对比方式（这个确实是严格相等===），而是：当依赖数组里放的是number这类变量时，React不需要关联对应的状态属性，它是怎么完成新旧值对比的？

实际运行逻辑 #

React内部的逻辑非常直接，根本不需要“确定对应哪个状态属性”：

• 每次组件渲染时，React会把当前依赖数组的每一项按顺序存入组件对应的缓存（fiber节点的状态存储区）。
• 下一次渲染时，它会拿新依赖数组的每一项，和上一次缓存中对应位置的旧值做严格相等对比（===）。
• 只要有任意一项对比不相等，就会触发useEffect的回调函数。

用你的代码举例：

React.useEffect(()=> {
 console.log('My val changed', number)
}, [number])

• 第一次渲染时，假设number值为1，React缓存下[1]。
• 第二次渲染时，如果number变为2，新依赖数组是[2]，对比2 === 1不成立，就触发回调。

关于“数字数组依赖”的补充 #

如果你的依赖是[1,2,3]这类固定数字数组：

• 每次渲染时这个数组都是新创建的引用（数组是引用类型），所以新旧数组的引用对比[1,2,3] === [1,2,3]结果为false，会导致useEffect每次渲染都触发。
• 但如果是单个基本类型值（比如number），只要值不变，===对比就会成立，不会触发回调。

关键结论 #

React不会追踪变量对应的是哪个state/props，它只关注当前渲染时依赖数组的实际值，以及和上一次渲染缓存的同位置值是否相等。不管变量来自state、props还是局部变量，逻辑完全一致。

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