React Hooks当中的 useEffect 是如何区分生命周期钩子的

useEffect可以看成是 componentDidMount、componentDidUpdate和 componentwillUnmount三者的结合。

useEffect( callback,[ source])

生命周期函数的调用主要是通过第二个参数[ source]来进行控制有如下几种情况：

• [ source]参数不传时，则第一次渲染之后和每次更新之后都会执行

  useEffect(()=>{
        
        
     console.log('初始化与每次更新之后，都会执行')
  })
  

• [ source]参数传 [ ] 时，则外部的函数只会在初始化时调用一次，返回的那个函数也只会最终在组件卸时调用一次

  useEffect(()=>{
        
        
     console.log('componentDidMount')
     return ()=>{
        
        
         console.log('componentwillUnmount')
     }
  },[])
  

• [source]参数有值时，则只会监听到数组中的值发生变化后，才优先调用返回的那个函数，再调用外部的函数

  useEffect(()=>{
        
        
     console.log('仅在count值发生变化时执行！')
  },[count])