常见用法

  1. 无参数：组件的任何更新，该 useEffect 对应的返回函数和函数都执行
  2. 为空数组：只在componentDidMount执行一次，不监听组件的更新，
  3. 数组中有具体依赖：对应的依赖数据，有变化的时候，才会执行（初始不会执行）；例子中test改变才会执行 
useEffect(() => {
    console.log('空数组执行')
  }, [])
  useEffect(() => {
    console.log('不传值执行')
  })
  let test = '123'
  useEffect(() => {
    console.log('依赖test执行')
  }, [test])
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.

效果：

useEffect_前端

由此可见：空数组执行一次，不传值只要组件有任何更新都执行，依赖test改变的只有test发生改变才执行

 清楚useEffect内部操作

组件卸载时需要清除 effect 创建的例如订阅或计时器 ID 或者重要信息防止内存泄露的时候需要再组件卸载的时候清除。

useEffect(()=>{
   
   //此处进行订阅、监听、或者设置重要值
    // 在此处返回一个解绑函数
    return ()=>{
      //此处对订阅、监听、或者重要值进行移除
    }
 })
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.