useEffect用法

下一个路口yj

于 2023-10-24 14:27:42 发布

阅读量197

点赞数

CC 4.0 BY-SA版权

文章标签： 1024程序员节

本文链接：https://blog.youkuaiyun.com/weixin_38222276/article/details/134011693

文章详细解释了JavaScript中的useEffectHook在React组件中的三种常见用法：1)当第二个参数为空数组时，等同于componentDidMount，用于初始化操作；2)第一个参数返回函数时，类似componentWillUnmount，处理组件卸载时的清理工作；3)第二个参数不为空数组时，表示依赖状态改变时执行。

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

1.第二个参数为空数组时相当于  componentDidMount函数

useEffect(()=>{
    // 监听
    addEventListener('resize',listenResize)
  },[])

const listenResize=()=>{
    console.log('tttt')
  }

2.第一个参数的返回内容为函数时，相当于 卸载函数componentWillUnmount

useEffect(()=>{
    // 监听
    addEventListener('resize',listenResize)
    // 销毁
    return ()=>{
      removeEventListener('resize',listenResize)
    }
  },[])

const listenResize=()=>{
    console.log('tttt')
  }

3.第二个参数不为空数组时  

useEffect(()=>{

    console.log('a变化时执行')

  },[a])