React生命周期

（生命周期——即可以在某些时候做特定逻辑）

📌一、旧版

过程

1. 初始化阶段: 由ReactDOM.render()触发---初次渲染

   1. constructor()
   2. componentWillMount()（已删，目前使用需要UNNSAFE_前缀）
   3. render()
   4. componentDidMount()

2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发

   1. shouldComponentUpdate() 控制更新的开关
   2. componentWillUpdate()（已删，目前使用需要UNNSAFE_前缀）
   3. render()
   4. componentDidUpdate()

3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发

   1. componentWillUnmount()

💡注意点：

1. componentWillReceiveProps （子组件将接收到props之前触发） 第一次父组件传过来props不会触发（已删，目前使用需要UNNSAFE_前缀）

   ---

   📌二、新版（16.3开始）

过程：

1. 初始化阶段: 由ReactDOM.render()触发---初次渲染

   1. constructor()
   2. getDerivedStateFromProps（新增）
   3. render()
   4. componentDidMount()

2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发

   1. getDerivedStateFromProps(props，state) （新增）
   2. shouldComponentUpdate(nextProps, nextState, nextContext)
   3. render()
   4. getSnapshotBeforeUpdate(prevProp, prevState) （新增）
   5. componentDidUpdate(prevProps, prevState)

3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发

   1. componentWillUnmount()

💡注意点：

1. getDerivedStateFromProps(props，state)从props中获取派生状态，把参数props当状态使用，取决于props， 必须值val必须返回对象，会自动映射合并到state中；
2. getSnapshotBeforeUpdate 为更新前获取快照，return值成为componentDidUpdate() 的第三个参数
3. componentDidUpdate() 参数分别为（preProps值，preState值，val快照返回值）

📌提示

1. 常用周期钩子

   1. render 初始化渲染或更新渲染调用,创建虚拟dom,进行diff算法,更新dom树都会在此进行
   2. componentDidMount 开启监听, 发送ajax请求
   3. componentWillUnmount 做一些收尾工作, 如: 清理定时器