什么是副作用操作？
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;
依赖项为响应式变量构成的数组
类似 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;
