新世纪建设集团网站建筑项目查询平台
什么是副作用操作？
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;