说说你对useEffect的理解,可以模拟哪些生命周期?

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

• 默认函数组件没有生命周期
• 函数组件是一个纯函数，执行完即销毁，自己无法实现生命周期
• 通过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

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

初始化

在组件初始化阶段会执行

constructor
componentWillMount()
render()
componentDidMount()

更新阶段

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

componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()

卸载阶段

componentWillUnmount()