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;

如何关闭开发环境执行两次 ？

将 src/main.jsx 中的 <React.StrictMode> </React.StrictMode> 标签删除即可。