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

时间：2025-02-17 08:03:01

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

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

这是我们常用的方法

重点来了:

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

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

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

   }
}, [])

2. 副作用函数的返回值

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

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

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

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

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

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

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

相关文章