useEffct hook模拟生命周期

react中的函数式组件是一个纯函数，它没有自己的状态，也没有自己的生命周期的，因而需要借助hooks去实现更多的功能。

1.模拟componentWillMount、componentWillUnmount

function Demo() {

    useEffect(() => {
        // 相当于 componentDidMount
        console.log("我模拟了componentDidMount")
 
        return () => {
          // 相当于 componentWillUnmount
          console.log("我模拟了componentWillUnmount")
        }
      }, [])
}

2、模拟componentDidUpdate

// 该组件中的数据发生变化，这个hook都会被触发
function Demo() {
   useEffect(() => {
        // 相当于 componentDidUpdate
        console.log("我模拟了componentDidUpdate，并且该组件中的数据发生变化，我都会被触发")
      })
}


// 该组件中的数据如何变化，这个hook都只会被触发一次
function Demo() {
   useEffect(() => {
        // 相当于 componentDidUpdate
        console.log("我模拟了componentDidUpdate，并且只触发一次")
      },[])
}


// 该组件中的sum发生变化，这个hook才会被触发
function Demo() {
   const [sum,setSum] = setState(0)
   useEffect(() => {
        // 相当于 componentDidUpdate
        console.log("我模拟了componentDidUpdate，并且只有sum发生改变才触发")
      },[sum])
}