在useEffect中设置state并加入依赖数组为何未触发无限循环？

嘿，这个问题问得很到位！咱们来一步步拆解这段代码的执行逻辑：

首先先看你给出的代码：

useEffect(() => {
  setName('John');
}, [name]);

假设name的初始值不是'John'，它的执行流程是这样的：

• 第一次组件渲染：此时name是初始值（比如''或者其他非'John'的值），组件渲染完成后，React检查useEffect的依赖数组[name]，发现这是第一次执行，所以会触发这个effect回调。
• 执行effect回调：调用setName('John')，把name的状态更新为'John'。状态更新会触发组件重新渲染。
• 第二次组件渲染：此时name的值已经是'John'了。React再次检查useEffect的依赖数组，拿当前的name值（'John'）和上一次渲染时的name值（也就是刚更新后的'John'）做浅比较——两者完全相等，所以不会再次触发这个effect回调。

没有了后续的setName调用，自然就不会再触发组件重新渲染，也就不会陷入无限循环啦。

补充个小知识点：React对useEffect依赖的对比是浅比较，对于字符串、数字这类基本类型，直接对比值是否相等就够了；如果是对象、数组这类引用类型，就得注意引用地址是否变化的问题，但这个例子里是字符串，完全不用操心～

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