react18【系列实用教程】useEffect —— 副作用操作 （2024最新版）

什么是副作用操作？

useEffect 用于编写由渲染本身引起的对接组件外部的操作（官方称呼为：副作用操作）

以下情况会触发页面渲染

• 初次加载页面（组的挂载）
• 响应式变量发生变化，触发页面根据新值重新渲染（组件更新）
• 关闭页面（组件卸载）

以下情况需要添加副作用操作

• 页面初步渲染完成后，向服务器获取数据完成页面的最终渲染
• 响应式变量发生变化时，先根据新值执行必要的其他业务逻辑，再进行最终的页面更新渲染
• 关闭页面时，关闭定时器

useEffect 语法

useEffect 是 hook 函数

• 第一个参数（必要）： 自定义的处理函数（官方称呼为：副作用函数）
• 第二个参数（可选）： 依赖项

无依赖项

执行副作用函数的时机

• 组件初次渲染后（组件挂载完成），在开发环境，会执行两次，生产环境仅执行一次
• 组件更新渲染前（任一响应式变量变化都会触发！）

import { useEffect } from "react";function Demo() {useEffect(() => {console.log("执行了副作用函数");});return (<><div>你好</div></>);
}export default Demo;

依赖项为空数组 []

类似 vue 的生命周期 mounted

执行副作用函数的时机

• 组件初次渲染后（组件挂载完成），在开发环境，会执行两次，生产环境仅执行一次

import { useEffect } from "react";function Demo() {useEffect(() => {console.log("执行了副作用函数");}, []);return (<><div>你好</div></>);
}export default Demo;

使用场景
初次渲染页面时访问接口加载页面数据

import { useEffect, useState } from "react";
import axios from "axios";function Demo() {const [list, setList] = useState([]);useEffect(() => {async function getList() {const res = await axios.get("http://localhost:3000/dataList");setList(res.data);}getList();}, []);return (<>{list.map((item) => (<div key={item.id}>{item.title}</div>))}</>);
}export default Demo;

依赖项为响应式变量构成的数组

类似 vue 的立即执行侦听器 watch

执行副作用函数的时机

• 组件初次渲染后（组件挂载完成），在开发环境，会执行两次，生产环境仅执行一次
• 响应式变量发生变化触发页面进行更新渲染前

import { useEffect, useState } from "react";function Demo() {const [name, setName] = useState("朝阳");useEffect(() => {// 在挂载和 name 更新时，都会执行！console.log("当前name值为：", name);}, [name]);function changeName() {setName("晚霞");}return (<><button onClick={changeName}>改名字</button></>);
}export default Demo;

清除副作用

最经典的场景即在组件卸载时清除计时器，以免内存泄露

father.jsx

import { useState } from "react";
import Child from "./child.jsx";function Father() {const [ifChild, setIfChild] = useState(true);function removeChild() {setIfChild(false);}return (<><button onClick={removeChild}>移除子组件</button>{ifChild && <Child />}</>);
}export default Father;

child.jsx

import { useEffect } from "react";function Child() {useEffect(() => {// 添加定时器const timer = setInterval(() => {console.log("执行了定时器");}, 1000);return () => {// 清除定时器clearInterval(timer);};});return (<><div><h1>我是子组件</h1></div></>);
}export default Child;