React --生命周期16

React --生命周期16.0–随想录–第三树

1. constructor

   • 属性的绑定 ：将父组件传来的属性绑定到当前组件的props属性上面
   • 定义状态 ： this.state = { } 状态的初始化
   • 绑定方法的this指向 this.方法名 = this.方法名.bind(this)
   • 初始化 state 和绑定事件处理程序。

2. static getDerivedStateFromProps

   • 接收两个参数 nextprops ,perventprops
   • nextprops :指父组件传过来的属性
   • pervenprops:指当前组件未更新前的状态（只是状态）
   • 被动触发的方法 父组件穿过来的属性发生变化是 也触发该方法
   • 慎用 （会造成潜在的错误）
   • 能造成重新渲染 影响性能

3. componentWillMount

   • 17版本可以被遗弃 一般不用它

4. render

   • 解析jsx语法转化成v-dom
   • 计算this.state 和 this.props
   • 关于 render 方法的一个重要注意事项是，不要在函数中调用 setState 或者与外部 API 发生交互。

5. componentDidMount

   • 组件挂载到DOM元素上时立即调用

   • 这里可以做数据的请求（唯一一个加载数据的地方）

   • 这里也可以操作真实的Dom元素

   • 父组件会让这个组件重新渲染，即使props没有改变，也会调用这个方法。

6. 运行阶段 再次调用 getDerivedStateFromProps

7. shouldComponentUpdate

• 使React知道，组件的输出是否受state和props的影响
• 默认为true，即state props 改变重新渲染组件视图
• 返回false不会阻止子组件在state更改时重新渲染
• 这个生命周期方法主要用于优化性能。

8. componentWillUpdata

   • 只有在函数shouldcomponentupdate的结果为true时被执行
   • 将此作为在更新发生之前进行准备的机会
   • 不能在这里使用this.setState()*，也不能做会触发视图更新的操作
   • 两个参数 nextprops指父组件中的属性 nextstate指的是更新后的状态

9. .getSnapshotBeforeUpdate

   • 在react render()后的输出被渲染到DOM之前被调用
   • 它使您的组件能够在它们被潜在更改之前捕获当前值
   • 这个生命周期返回的任何值都将作为参数传递给componentDidUpdate

10. componentDidUpdate(prevProps, prevState, snapshot)

    • 更新之后调用
    • 可以操作真实Dom

11. componentWillUnmount

    • 在组件被卸载并销毁之前立即被调用
    • 在此方法中执行任何必要的清理 如定时器