说说你对useEffect的理解，可以模拟哪些生命周期？

最新推荐文章于 2025-04-05 19:58:53 发布

嘉ioo

最新推荐文章于 2025-04-05 19:58:53 发布

阅读量1.2k

点赞数

文章标签： javascript 前端 react.js

本文链接：https://blog.youkuaiyun.com/weixin_61029090/article/details/129675254

版权

文章介绍了ReactHooks中的useEffect，它是如何实现组件副作用管理的。通过示例解释了useEffect如何模拟componentDidMount、componentDidUpdate和componentWillUnmount这三个经典生命周期方法，并警告了在不正确使用第二个参数时可能出现的问题。同时，文章展示了如何在useEffect中处理异步数据获取和清理资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提示：写完文章后，目录可以自动生成

提示：以下是本篇文章正文内容，下面案例可供参考

一、useEffect是什么？

使用钩子函数useEffect可以实现组件的副作用

useEffect(希望执行的动作，[组件状态的列表]);

第二个参数是用来处理useEffect的调用的时机，是一个数组，数组内是组件状态的列表

举个栗子：

想要实现每次的点击计数器的同时更新网站的标题，那么useEffect的处理时机就是应该在state的变化之后，所以在第二个参数的列表中填入count

useEffect(() => {
  document.title = `点击了${count}次`;
}, [count]);

二、模拟生命周期？

import React, { useState, useEffect } from "react";

const App = () => {
  const [count, setCount] = useState(0);
  const [list, setList] = useState([]);

  useEffect(() => {
    document.title = `点击了${count}次`;
  }, [count]);
  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((data) => setList(data));
  }, []);

  return (
    <div>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click
      </button>
      <span>count: {count}</span>
      <div>
        {list.map((item, index) => (
          <span key={index}>{item.name}</span>
        ))}
      </div>
    </div>
  );
};

export default App;

以此为例子

1、useEffect模拟componentDidMount

当useEffect的第二个参数传入的是一个空列表是，相当于模拟生命周期函数componentDisMount。这个函数的副作用是仅在组件第一次挂载UI的时候调用一次

用它来模拟组件初次挂载时，访问api，获取数据：

useEffect(() => {
 fetch("https://jsonplaceholder.typicode.com/users")
   .then((response) => response.json())
   .then((data) => setList(data));
}, []);

2、useEffect模拟componentDidUpdate

如果在使用useEffect时不带上第二个参数，就相当于模拟了生命周期函数componentDidUpdate。每次渲染结束的时候都会被调用。

如果上面的例子去掉第二参数，像下面这样：

useEffect(() => {
 fetch("https://jsonplaceholder.typicode.com/users")
   .then((response) => response.json())
   .then((data) => setList(data));
});

1、在每次渲染后被执行，调用API更新list；
2、由于list的更新，ui会再次渲染；
3、程序就陷入了死循环。
因此，要谨慎使用第二个参数为空的情形。

3、useEffect模拟componentWillUnmount

在useEffect中返回一个函数用于模拟component WillUnMount

useEffect(() => {
  let timerId = window.setInterval(() => {
    console.log(Date.now())
  }, 1000)

  // 返回一个函数用于模拟 WillUnMount
  return () => {
    window.clearInterval(timerId)
  }
}, [])