React@16.x（23）useEffect
目录
- 1，介绍
- 作用
- 介绍
- 2，注意点
- 2.1，参数1，副作用函数
- 2.1.1，运行时间点
- 2.1.2，返回值
- 2.1.3，闭包的影响
- 2.1.4，严禁出现在代码块中（判断，循环）
- 2.1.5，尽量保持副作用函数稳定
- 2.2，参数2，数组
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])
以上。