useEffect 无法监控，死循环，第二个参数不能是引用类型

项目场景：

项目背景：

使用react Hooks中的useEffect勾子

• 获取数据
• 事件监听或订阅
• 监控/改变DOM
• 设置定时器，输出日志
• 该 Hook 接收一个包含命令式、且可能有副作用代码的函数。

问题描述

问题：

react Hocks中的useEffect勾子，第二参数传值复杂（引用）类型造成页面的死循环

import React, { useState, useEffect } from 'react';

function Example() {
  const [obj, setObj] = useState({item:''});

  useEffect(() => {
   setObj({test:"obj是一个对象，使得页面死循环"})
  },[obj]);

  return (
    <div>
      <p>You clicked {obj.item} times</p>
      <button onClick={() => setObj((x)=>{
      x.item=1
      return x
      )}>
        Click me
      </button>
    </div>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

页面死循环

原因分析：

react Hocks中的useEffect勾子极大简化了代码，但是又有些副作用，这些副作用用好了提高效率，用不好加班不断！

useEffect接受两个参数：

1. 第一个参数是函数（这里叫effect函数），它的作用是，在页面渲染后执行这个函数。因此你可以把ajax请求等放在这里执行；
2. 第二个参数是一个数组，这里注意：

上面例子中之所以造成页面的死循环，是因为在JavaScript中，{} ==={}结果是false,{a:1}=== {a:1}同样，由此造成了react以为两个值不同，就一直的渲染最终页面死循环。

---

解决方案：

1、第二个参数一般情况下不要使用引用类型！
2、使用lodash里的isEqual：