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><buttononClick={() => {setN(n + 1);}}>加一</button></div>);
}

2，注意点

2.1，参数1，副作用函数

2.1.1，运行时间点

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

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

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

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 />}<buttononClick={() => {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><buttononClick={() => {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])

---

以上。