useEffect 传递不同参数有哪些执行规则?


一、参数规则

1、可选的

2、数组类型

3、值为state或者props

二、不同的参数和返回

1、不传参数

  默认的行为,会每次 render 后都执行,一般表单控制中使用

      类似于类组件中的componentDidMoount以及componentDidUpdate

useEffect(() => {
    console.log('useEffect with no dependency')
})

2、空数组

  传入第二个参数,每次 render 后比较数组的值没变化,不会在执行

  类似于类组件中的 componentDidMount

useEffect(() => {
    console.log('useEffect with empty dependency')
}, [])

3、有一个或者多个值得数组

  传入第二个参数,只有一个值,比较该值有变化就执行,

  传入第二个参数,有2个值的数组,会比较每一个值,有一个不相等就执行

  类似于类组件中的componentDidUpdate

useEffect(() => {
    console.log('useEffect widh specify dependency')
}, [state, props])

4、返回一个函数

     返回时传递一个函数进行卸载,在组件卸载时候调用

     类似于类组价中componentWillUnmout

useEffect(() => {
   console.log('useEffect widh specify callback'); 
  return () => {
    console.log(
'useEffect with specify callback');
  }
})

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM