react 生命周期总结

初始化阶段

constructor

1、定义state
2、可以给state赋值初始化props
3、给普通函数绑定this
4、通过super 继承props  this.props = props

componentWillMount 表示组件即将挂载

1、可以进行数据修改
2、17版本弃用了 因为容易造成异步滥用
3、如果你在17版本还想用它，加 UNSAFE_componentWillMount

render

1、解析this.state和this.props
2、通过createElement这个api将jsx转成vdom
!!! 切记不能用setState
因为js单线程 ，不能再当前任务还没完成时去执行其他的任务

componentDidMount

1、获取了真实的DOM，可以进行真实DOM操作【第三方库实例化】
2、可以进行数据请求、数据修改

更新阶段update()

两条线 props变更和state变更

更新阶段触发条件 1-setState, 2-forceUpdate

 #  props变更  ---

###  componentWillReceiveProps( )
1.  props改变才会触发
2.  可以通过参数获取最新属性
3. this.props vs nextProps可以监听属性是否该改变
！！！17版本弃用了 可以使用shouldComponent来代替它

###  shouldComponentUpdate( )
1、react 性能优化的关键钩子函数
2、返回值是true 组件更新，false不更新
3、可以进行比较  
    this.state vs nextState
    this.props vs nextProps
4、工作问题 多次渲染的问题找这个钩子函数 

###  componentWillUpdate( )
1、组件更新前的准备
2、17版本被弃用了和componentWillMount 被弃用原因一样
### componentDidUpdate( )
1、组件更新结束
2、通过Filber算法比对得到patch 补丁对象将patch补丁对象渲染到页面
3、再次渲染得到渲染后的真实DOM。可以做真实dom操作
4、也可以再次发送数据请求

# state变更 ---shouldComponentUpdate()---成功success--componentWillUpdate( )--render---componentDidUpdate( )

# state变更 ---shouldComponentUpdate()---失败false--更新-->shouldComponentUpdate()---成功success--componentWillUpdate( )--render---componentDidUpdate( )

forceUpdate 激活 componentWillUpdate( )--render---componentDidUpdate( ) 它们三个 强制渲染更新

组件卸载时触发 componentWillUnMount( )

1、清除计时器 定时器
2、清除组件无法删除的事件 比如绑定在window 或者document身上的事件
3、删除第三方库的实例

componentDidCatch 错误处理阶段 
1、捕获子组件错误
2、显示回退UI