React生命周期

React 生命周期

版本区别

---

React 15 三个阶段

​ 初始化阶段

​ 更新阶段

​ 卸载阶段

React 16 四个阶段

​ 初始化阶段

​ 更新阶段

​ 卸载阶段

​ 错误处理阶段

React 17 四个阶段

​ 初始化阶段

​ 更新阶段

​ 卸载阶段

​ 错误处理阶段

React 17生命周期

---

初始化阶段

constructor

可以做哪些事情？
    1. 肯定可以拿到绑定在当前组件身上的属性
    2. 可以定义state     this.state = {}
    3. 可以为普通函数绑定this  this.fn = this.fn.bind(this)

static getDerivedStateFromProps

 从Props属性中派生出State，该返回值会添加到state状态中形成新状态
	1. 它有两个参数，第一个参数是props，第二个参数是state
  	2. 这个钩子函数必须有返回值，返回值会成为当前组件的新状态(state)

render

 render
      1. 它会解析 this.state & this.props
      2. 它可以将jsx形式虚拟DOM处理成对象形式的虚拟DOM
      3. 注意不要直接使用setState,会造成栈溢出

componentDidMount

 表示组件挂载结束
  作用
   1. 虚拟dom渲染成了真实DOM，意味着我们可以做真实DOM操作  --- 第三方库实例化
   2. 可以发送数据请求
   3. 修改state

更新阶段

static getDerivedStateFromProps

 从Props属性中派生出State，该返回值会添加到state状态中形成新状态
	1. 是不仅是初始化阶段会执行，更新阶段也会执行
	2. 同初始化阶段作用一致

shouldComponentUpdate

决定组件是否可以更新的
        2. 它有两个参数
               nextProps   最新的props
               nextState   最新的state 
        3. 它必须有返回值，返回值是一个布尔值
               true   表示组件要更新
               false  拦截组件更新
        4. 可以拦截vdom更新流程
              组件性能优化目的   
        5. 如何对比
                nextProps  vs  this.props 
                nextState  vs  this.state       
        6. 使用lodash对比

render

getSnapshotBeforeUpdate

更新前获取快照
	作用:是componentDidUpdate的小弟，专为它来未完成一些任务
	业务场景:滚动条   
	通过返回值来给componentDidUpdate传参的 

componentDidUpdate

表示组件更新结束
  三个参数
         props   旧属性   
         state   就状态
         snapShot  快照   getSnapshotBeforeUpdate的返回值
      旧的数据通过参数拿，新的数据通过  this.state/this.props 拿 
      第二次的虚拟dom渲染成了真实DOM,这里我们在此得到了真实DOM
      也可以进行数据请求发送

销毁阶段

componentWillUnMount

错误捕获阶段

componentDidCatch