React如何区分依赖数组长度相同的两个useEffect钩子？

这绝对不是巧合，React靠钩子的调用顺序来精准区分每个useEffect，和依赖数组的具体值没关系。

具体来说：

• 组件每次渲染时，React会按代码里的顺序，逐个记录每个useEffect的回调函数和对应的依赖数组，每个钩子都有自己的“位置标记”，和它在代码中的顺序绑定死了。
• 当组件更新时，React会按同样的顺序，把每个useEffect的当前依赖数组和上一次渲染时的依赖数组做对比。如果某个位置的依赖数组发生变化，就执行这个位置对应的useEffect回调。

拿你的代码举例：

useEffect(() => {
  console.log('age changed')
}, [age])

useEffect(() => {
  console.log('name changed')
}, [name])

第一次渲染时，React会记住：第1个useEffect依赖age，第2个依赖name。当age变化时，它只去对比第1个useEffect的前后依赖（比如从[4]变成[5]），发现变化就执行对应的回调；而第2个useEffect的依赖name没变化，就不会触发。哪怕某天age和name的值碰巧一样（比如都是"Chris"），React也不会搞混——因为它是按钩子的位置来跟踪的，不是依赖数组的内容。

你之前的误解在于觉得React是通过依赖数组的结果去“匹配”钩子，但实际上每个钩子的身份是由它在组件中的调用顺序决定的，依赖数组只是用来判断这个特定钩子要不要执行而已。

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