一、让函数组件模拟生命周期

1. 默认函数组件没有生命周期
2. 函数组件是一个纯函数，执行完即销毁，自己无法实现生命周期
3. 通过Effect hook把生命周期“钩”到纯函数中

    // 模拟 class 组件的 DidMount 和 DidUpdate
    useEffect(() => {
      console.log('在此发送一个 ajax 请求')
    })

    // // 模拟 class 组件的 DidMount
     useEffect(() => {
        console.log('加载完了')
     }, []) // 第二个参数是 [] （不依赖于任何 state）

     // 模拟 class 组件的 DidUpdate
     useEffect(() => {
         console.log('更新了')
     }, [count, name]) // 第二个参数就是依赖的 state

    // 模拟 class 组件的 DidMount
    useEffect(() => {
        let timerId = window.setInterval(() => {
            console.log(Date.now())
        }, 1000)

        // 返回一个函数
        // 模拟 WillUnMount 组件销毁的时候 停止计时器
        return () => {
            window.clearInterval(timerId)
        }
    }, [])

总结：

• 模拟componentDidMount  -  useEffect 依赖 [ ]
• 模拟compenentDidUpdate - useEffect 无依赖 ，或者 依赖 [a,b,c]
• 模拟componentWillUnMount - useEffect 中返回一个函数

react在16.8之后有了新特性 react hooks

之前的主要的生命周期为：

初始化

在组件初始化阶段会执行

1. constructor
2. componentWillMount() 
3. render()
4. componentDidMount()

更新阶段

props或state的改变可能会引起组件的更新，组件重新渲染的过程中会调用以下方法：

1. componentWillReceiveProps()
2. shouldComponentUpdate()
3. componentWillUpdate() 
4. render()
5. componentDidUpdate()

卸载阶段

1. componentWillUnmount()