引起 useEffect 钩子 无限循环的原因分析

引起 useEffect 钩子无限循环的操作有：

1、不传递依赖项，并在useEffect中执行改变某些状态
2、在useEffect中执行改变某个状态，并把这个状态作为依赖项
3、使用函数作为依赖项，并在useEffect中执行改变某些状态
4、使用数组作为依赖项，并在useEffect中执行改变某些状态
5、使用对象作为依赖项，并在useEffect中执行改变某些状态

下面进行逐个举例分析

1、不传递依赖项，并在useEffect中执行改变某些状态

循环示例

导致循环的原因分析：
首次渲染时，会触发useEffect，useEffect执行setCount，setCount改变了count的值
不传递依赖项，任何状态更新都会执行useEffect，所以count被改变了又触发了useEffect陷入了循环。

解决方案：

空数组作为依赖项，首次渲染时执行

2、在useEffect中执行改变某个状态，并把这个状态作为依赖项

循环示例

导致循环的原因分析：
首次渲染时，会触发useEffect，useEffect执行setCount，setCount改变了count的值
count作为依赖项，count状态更新则依赖项改变了，又触发了useEffect陷入了循环。

解决方案：

空数组作为依赖项，首次渲染时执行

3、使用函数作为依赖项，并在useEffect中执行改变某些状态

循环示例

导致循环的原因分析：
首次渲染时，会触发useEffect，useEffect执行setCount，setCount改变了count的值
状态改变会导致重新渲染组件，重新渲染组件会导致函数Fn的引用会被重新定义，引用不同则useEffect依赖项发生改变，所以触发了useEffect，陷入了循环。

解决方案：

使用useCallback钩子，重新渲染组件时，获取缓存中函数Fn的引用，依赖项仍是原来的引用，阻止了循环。

4、使用数组作为依赖项，并在useEffect中执行改变某些状态

循环示例

导致循环的原因分析：
首次渲染时，会触发useEffect，useEffect执行setCount，setCount改变了count的值
状态改变会导致重新渲染组件，重新渲染组件会导致数组arr的引用会被重新定义，引用不同则useEffect依赖项发生改变，所以触发了useEffect，陷入了循环。

解决方案1：

使用useMemo钩子，重新渲染组件时，获取缓存中数组arr的引用，依赖项仍是原来的引用，阻止了循环。

解决方案2：

使用useRef钩子，useRef 创建出来的对象始终都是最开始的那个对象，重新渲染组件时，依赖项仍是原来的数组arr，阻止了循环。

5、使用对象作为依赖项，并在useEffect中执行改变某些状态

循环示例

导致循环的原因分析：
首次渲染时，会触发useEffect，useEffect执行setCount，setCount改变了count的值
状态改变会导致重新渲染组件，重新渲染组件会导致对象obj的引用会被重新定义，引用不同则useEffect依赖项发生改变，所以触发了useEffect，陷入了循环。

解决方案1：

使用useMemo钩子，重新渲染组件时，获取缓存中对象obj的引用，依赖项仍是原来的引用，阻止了循环。

解决方案2：

使用useRef钩子，useRef 创建出来的对象始终都是最开始的那个对象，重新渲染组件时，依赖项仍是原来的对象obj，阻止了循环。