本文已参与「新人创作礼」活动，一起开启掘金创作之路。

React useEffect

useEffect 常见的作用

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

useEffect(fn,param2) 的两个参数

第1个参数： 是一个函数，必传项。

第2个参数： 非必传项(可以传数组或者不传)。重点：如果存在参数，参数更新时，如果上一次的值等于更新后的值，两者对比为true， 则不执行useEffect。如果上一次的值不等于更新后的值，两者对比为false， 则重新执行useEffect。

useEffect使用第2个参数的业务结果

1、没有第2个参数

const [number, setNumber] = useState<number>(1);
useEffect(() => {
    setTimeout(() => {
        setNumber(number + 1);
    }, 1000);
    console.log(`第2个参数: 无参数, 第 ${number} 次执行`);
    // console.log会无限循环
    第2个参数: 无参数, 第 1 次执行
    第2个参数: 无参数, 第 2 次执行
    第2个参数: 无参数, 第 3 次执行
    第2个参数: 无参数, 第 n 次执行
});

useEffect 会在第一次以及每次更新渲染后执行。

2、第2个参数为：空数组

const [number, setNumber] = useState<number>(1);
useEffect(() => {
    setTimeout(() => {
        setNumber(number + 1);
     }, 1000);
     console.log(`第2个参数: 空数组, 第 ${number} 次执行`);
     // console.log只执行1次
     第2个参数: 空数组, 第 1 次执行
}, []);

useEffect第一次渲染后执行一次，然后停止。

3、第2个参数为：基础数据类型

const [number, setNumber] = useState<number>(1); 
useEffect(() => {
    setTimeout(() => {
        setNumber(number + 1);
    }, 1000);
    console.log(`第2个参数: 基本数据类型, 第 ${number} 次执行`);
    // console.log 会无限循环
    第2个参数: 基本数据类型, 第 1 次执行
    第2个参数: 基本数据类型, 第 2 次执行
    第2个参数: 基本数据类型, 第 3 次执行
    第2个参数: 基本数据类型, 第 n 次执行
}, [number]);

useEffect第一次渲染以及每次state更新渲染后执行。

useEffect 的第二个参数只有一个值情况下，比较该值有变化就触发 useEffect。如果第2个参数存在多个值的数组，其中有一个变化就触发 useEffect。

4、第2个参数为引用类型：数组[1, 2]、函数function、对象{name:"Tom"}

数组、函数、对象都是引用类型，有共同的通病，即无限循环。