React组件的生命周期可分成三个状态：

1. Mounting(挂载)：VitualDom 转换为真实 Dom
2. Updating(更新)：state变化后更新生成新的DOM
3. Unmounting(卸载)： 卸载组件 / 销毁组件

类组件(Class)

按执行时机顺序依次为 (列举常见的,有些已废弃或者少的没列)

1. constructor()
   构造函数,组件初始化时执行
2. render()
   渲染dom
3. componentDidMount()
   组件挂载DOM后立即调用 , 是发送网络请求、启用事件监听方法的好时机
4. shouldComponentUpdate(nextProps, nextState)
   组件状态State更新前调用
5. componentDidUpdate(prevProps, prevState, snapshot)
   组件状态State更新后调用
6. componentWillUnmount()
   组件卸载前调用 , 常用于取消网络请求、清除 定时器 / 监听器 , 以防内存泄露造成页面卡顿

函数式组件(hooks)

使用useEffect来模拟 3个最重要的生命周期

useEffect第一个参数为副作用函数, 第二个参数是依赖项数组,
副作用函数的依赖项，只有依赖项发生变化，才会重新执行函数

1. 模拟componentDidMount

   // 第二个参数, 依赖项为空数组 useEffect(()=>{console.log('第一次渲染时调用')},[])

2. 模拟componentDidUpdate

   //没有第二个参数代表监听所有的属性更新 useEffect(()=>{console.log('任意属性值改变')})  //监听多个属性的变化需要将属性作为数组传入第二个参数 useEffect(()=>{console.log('a的值变化了')},[a,b]) 

3. 模拟componentWillUnmount

   // 使用return useEffect(()=>{   const timer = setTimeout(()=>{       ...   },1000)   return()=>{       console.log('组件销毁前清除定时器/监听器')       clearTimerout(timer)   } })

04:30