React@16.x（23）useEffect

1，介绍

作用

用于在函数组件内，处理副作用，比如：

• ajax 请求
• 计时器
• 其他异步操作
• 更改真实DOM对象
• 本地存储
• 其他会对外部产生影响的操作（和自身无关）。

介绍

useEffect 接收2个参数，

• 参数1，一个函数。在该函数中执行副作用。
• 参数2（可选），一个数组。记录参数1中使用到的依赖。

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

export default function App() {
    const [n, setN] = useState(0);
    useEffect(() => {
        document.title = `数字：${n}`;
    });
    return (
        <div>
            <span>{n}</span>
            <button
                onClick={() => {
                    setN(n + 1);
                }}
            >
                加一
            </button>
        </div>
    );
}

2，注意点

2.1，参数1，副作用函数

2.1.1，运行时间点

在页面完成真实UI渲染后执行，并且是异步的，不会阻塞浏览器。

和类组件中的生命周期函数 componentDidMount 和 componentDidUpdate 的区别：

它们是同步执行的；在得到真实DOM后，用户还没有看到真实UI渲染时执行。

useLayoutEffect 的执行时间点和 componentDidMount 和 componentDidUpdate 相同。

2.1.2，返回值

要么没有返回值，如果有必须是一个函数。该函数称为清理函数。

type EffectCallback = () => void | (() => void);;

清理函数的特点：

• 首次渲染不会执行，组件销毁一定执行；
• 再次渲染时，会在副作用函数之前运行。

所以，一般会在清理函数中，清理副作用函数开启的计时器。

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

function Child() {
    useEffect(() => {
        let timer = null;
        let n = 10;
        timer = setInterval(() => {
            console.log(n--);
        }, 1000);
        return () => {
            clearInterval(timer);
        };
    });
    return <div>子组件</div>;
}

export default function App() {
    const [visible, setVisible] = useState(true);
    return (
        <div>
            {visible && <Child />}
            <button
                onClick={() => {
                    setVisible(!visible);
                }}
            >
                显示/隐藏
            </button>
        </div>
    );
}

2.1.3，闭包的影响

在副作用函数中，如果使用了函数组件上下文中的变量，受闭包影响，会导致副作用函数中的变量不会实时变化。

原理和闭包的经典问题一样，不同点是这里的 n 是一个状态，

也就是说，每次函数组件重新调用，计时器的回调函数使用的都是当次函数组件调用时产生的新值（ 相当于计时器中使用了传递的参数）。

所以每次开启新计时器时，n 都不一样。

export default function App() {
    const [n, setN] = useState(10);
    useEffect(() => {
        setTimeout(() => {
            console.log(n);
        }, 3000);
    });
    return (
        <div>
            <button
                onClick={() => {
                    setN(n - 1);
                }}
            >
                n-1
            </button>
        </div>
    );
}

3s 后打印，所以在3s内连续点击按钮3次，3s后会先打印出 10（首次渲染），再依次打印出 9 8 7 。

2.1.4，严禁出现在代码块中（判断，循环）

原理和 useState 类似，这样写会导致无法正确获取要执行的副作用函数。

2.1.5，尽量保持副作用函数稳定

副作用函数在每次（重新渲染）注册时，会覆盖掉之前的副作用函数，因此，尽量保持副作用函数稳定，否则控制起来会比较复杂。

2.2，参数2，数组

作用：记录副作用函数的依赖数据。当组件重新渲染后，如果新旧依赖数据不一致（Object.is() 判断），才会执行副作用函数。

类似于 Vue3 中的 watcheffect。

所以，如果依赖数据没有发生变化，则：

• 副作用函数仅在组件第一次渲染后执行；
• 清理函数仅在组件卸载时执行。

参数2传递空数组就能实现依赖不发生变化。

useEffect(() => {
    console.log('副作用函数执行');
    return () => {
        console.log('清理函数执行');
    }
}, [])

比如请求列表数据，当前页码 page 和每页展示个数 limit 发生变化时，再请求接口：

useEffect(() => {
    (async function () {
        const resp = await getList(page, limit);
        // 获取 list 和 total
    })();
}, [page, limit])

---

以上。