react中副作用函数(useEffect)详解

最新推荐文章于 2025-06-17 10:37:19 发布

时间管理maste

最新推荐文章于 2025-06-17 10:37:19 发布

阅读量7.6k

点赞数 9

CC 4.0 BY-SA版权

文章标签： react.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/DDAD9527/article/details/121294563

本文详细介绍了React Hooks中的useEffect，包括其三种常见用法：每次更新后执行、仅初始化时执行以及依赖项变化时执行。强调了useEffect必须是同步函数，异步操作需额外封装，并探讨了返回值作为清理函数的执行时机，如何利用它模拟componentWillUnmount生命周期。通过这些，读者能更深入地理解并有效应用useEffect。

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

先简单说一下常见的useEffect使用方式三种

useEffect(() => {
  // 副作用函数的内容
})  
 每次更新之后都要执行
--------------------
useEffect(() => {
  // 副作用函数的内容
}, []) 
初始化页面时 只执行第一次
--------------------
useEffect(() => {
  // 副作用函数的内容
}, [依赖项]) //依赖项可以有多个
1 初始执行一次 2 每次依赖项的值变化时执行

这是我们常用的方法

重点来了:

1. useEffect 只能是一个同步函数，不能使用 async

如果需要发送请求或者其他异步操作,需要额外加一个箭头函数包裹住

useEffect(()={
async () => {
    const res = awiat xxx()

   }
}, [])

2. 副作用函数的返回值

useEffect 函数是可以return的格式是下图,他可以返回一个函数,这个函数称为清理函数

useEffect(() => {
  // 副作用函数的内容

  return 副作用函数的返回值
}, [])

清理函数的执行时机： 清理函数会在组件卸载时以及下一次副作用函数调用之前执行

结合依赖项:上图中的清理函数只会在组件被卸载时调用,因为他的依赖项是空,只会在页面初始化的时候执行副作用函数不会执行清理函数,当组件卸载时执行清理函数

所以我们可以通过这一特性来模拟 componentWillUnmount 这个钩子函数,组件被销毁时执行

useEffect(()=>{
  return ()=>{
    // 做清理工作
  }
}, [])