遇到React的无限循环・死循环怎么办？

创建日期： 2021年4月6日
最近带新人，经常被求助，“无限循环了，怎么办呀”？
琢磨了一下，写下这篇笔记。本篇是基于使用react hooks的基础上，完成的。

1. useEffect

副作用。简单点说，每次进入新画面的时候，画面里如果有这个方法，都会被调用。如果单纯的React项目，那么很可能就是它的问题。

useEffect(() => {
// 代码...
}, [这里是依赖]);

调查方法：

首先，检查，添加依赖的中括号“[ ]”是否添加了？新人，有的会忘记写这个。

// 错误例子
useEffect(() => {
// 代码...
});  // 依赖的中括号“[ ]”忘记写了

把依赖清空，看看是否还死循环？
如果注释掉依赖，死循环解决了的话，那么我们要排查依赖的项目。

依赖里的变量里，存在通过useState定义的状态变量；
那么，副作用的内部，是否调用其对应的setState方法？如果有，那么你要修改下逻辑了，但是，你不能用了该状态变量，却不把它加在依赖里。如果不加在依赖里，那么你副作用里的state，永远都是初始值。
例子：（代码是直接在简书上盲敲的，有错误的话，请见谅）

const [visible, setVisible] = useState(false);
useEffect(() => {
  setVisible(!visible);
}, [visible]);

比如这个，我们想根据state的当前值，来决定接下来的设定。如果按上面的写法，就会出现死循环。我们可以这样写：

const [visible, setVisible] = useState(false);
useEffect(() => {
  setVisible(preState => !preState);
}, []);

依赖里的变量，存在一个普通的变量；
那么，请尝试用useMemo包裹一下这个普通变量；
例子：

const array = new Array();
useEffect(() => {
  // do something with array...
  // call setState(...)
}, [array]);

注意：依赖里的变量，用的是浅比较，因此，当你因为调用setState重新刷新画面的时候，array会被认为是一个新的对象，因此，useEffect会被再次调用。
修改方法：

const array = useMemo(() => {
  return myArray;
}, [myArray]);
//...省略

依赖里，存在函数
那么，请尝试用useCallback包裹一下这个函数。
跟2的原理一样，函数用useCallback包裹一下：

const getArray = useCallback(() => {
// do something to get array
  return ary;
}, []);
//...省略

如果依赖注释掉了，还是死循环，那么找找相关的地方吧，可能定位就定错了。

2. useFouceEffect

手机项目中，有时候会用到这个hooks（如果单词拼写错了，请见谅），一般，定义里面的函数时，都会用useCallback包裹一下，否则，容易出现死循环。另外，就是useCallback的依赖，排查方法与上面相同。

3. 自定义hooks

自定义hooks的好处，就是多个画面，可以复用同一个方法，现在也越来越被大家所喜欢。
在返回定义的方法（函数）时，推荐你用useCallback包裹一下，否则，其他人如果在useEffect等地方调用它的时候，很容易引起死循环。

好吧，先说到这里。大概就这么些情况。因为忙，所以未加事例代码。
如果你出现死循环，无法解决的话，可以给笔者留言。笔者也很想挑战一下。
如果，我的文章，解决了你的问题，麻烦动动你福气的小手，给点个赞，我想知道，我的排查方法到底管不管用。

望本篇能把那些挣扎在死循环里的小伙伴们，拖上岸😁

遇到React的无限循环・死循环怎么办？