react生命周期

生命周期

生命周期：组件从诞生到销毁会经历一系列的过程，该过程就叫做生命周期。React在组件的生命周期中提供了一系列的钩子函数（类似于事件），可以让开发者在函数中注入代码，这些代码会在适当的时候运行。

生命周期仅存在于类组件中，函数组件每次调用都是重新运行函数，旧的组件即刻被销

解释    对于类组件而言 每次render函数使用一次组件 相当于new一个react对象  renact本质上虚拟利用对象标识

生命周期实际上是该对象的生命周期 我们研究单个对象的生命周期  每个对象生命周期互不干扰

旧版生命周期（官方不推荐饿了）

React < 16.0.0

初始化阶段  初始化属性与状态

1. constructorshagn 
   1. 同一个组件对象只会创建一次 只会运行一次
   2. 不能在第一次挂载到页面之前，调用setState，为了避免问题，构造函数中严禁使用setState
2. componentWillMount        （ 组件即将被挂载到页面上）
   1. 可以使用setState，但是为了避免bug，不允许使用，因为在某些特殊情况下，该函数可能被调用多次
   2. 正常情况下，和构造函数一样，它只会运行一次
3. render  （组件渲染到虚拟dom）
   1. 返回一个虚拟DOM，会被挂载到虚拟DOM树中，最终渲染到页面的真实DOM中
   2. render可能不只运行一次，只要需要重新渲染，就会重新运行
   3. 严禁使用setState，因为可能会导致无限递归渲染  
4. componentDidMount   （虚拟dom已经挂载到了页面中成为了真实的dom） 到此为止挂载阶段完成
   1. 只会执行一次
   2. 渲染完成  可以使用setState 进行改变
   3. 通常情况下，会将网络请求、启动计时器等一开始需要的操作，（类似于initial（））书写到该函数中
5. 组件进入活跃状态   等待属性或者状态发生改变 来重新渲染页面
6. componentWillReceiveProps （nextProps）  状态改变触发  接收到了新的属性值
   1. 即将接收新的属性值
   2. 参数为新的属性对象
   3. 该函数可能会导致一些bug，所以不推荐使用
7. shouldComponentUpdate  状态setStatus或者属性props共同改变   是否重新渲染组件性能优化点
   1. 指示React是否要重新渲染该组件，通过返回true和false来指定
   2. 默认情况下，会直接返回true
   3. 必须要有返回值   可以通过判断进行性能优化
8. componentWillUpdate
   1. 组件即将被重新渲染   将会调用render函数  之后又会继续render之后的周期函数
9. componentDidUpdate
   1. 往往在该函数中使用dom操作，改变元素  
   2. 该函数拥有两个参数可以获取改变之前的属性还有状态的值
10. componentWillUnmount
    1. 通常在该函数中销毁一些组件依赖的资源，比如计时器
    2. 组件撤离dom结构 触发  再次显示时候会重新创建对象  

新版生命周期

React >= 16.0.0

1、解析： 第一次渲染时  首先触发constructor函数    初始化阶段完成

2、--> 执行getDerivedStateFromProps 

3、-->  render  组件渲染到虚拟dom 

 4、--> componentDidMount   （虚拟dom已经挂载到了页面中成为了真实的dom） 到此为止挂载阶段完成  --->  挂载阶段结束    

进入更新阶段   当属性  状态有改变时 会触发 getDerivedStateFromProps函数  从属性中获取子女的状态

 5、 ----> shouldComponentUpdate  状态setStatus或者属性props共同改变   是否重新渲染组件性能优化点   依旧是按照改变与否进行返回判定

接着再次进行渲染  render

  6、 --- 》  getSnapshotBeforeUpdate  （获取更新属性状态的快照  ）

7、-----》componentDidUpdate 

虚拟dom已经重新挂载到了页面上  成为了真实的dom

8、接着进入销毁阶段    componentWillUnmount

React官方认为，某个数据的来源必须是单一的

1. getDerivedStateFromProps  从一个属性中获取状态   状态属性改变都会触发
   1. 通过参数可以获取新的属性和状态
   2. 该函数是静态的
   3. 该函数的返回值会覆盖掉组件状态 返回值为null 或者一个对象
   4. 该函数几乎是没有什么用
2. getSnapshotBeforeUpdate  获取更新前快照
   1. 真实的DOM构建完成，但还未实际渲染到页面中。
   2. 在该函数中，通常用于实现一些附加的dom操作
   3. 该函数的返回值，会作为componentDidUpdate的第三个参数
   4. 得到之前的属性 和 状态   发生在更新阶段
3. react认为某个数据的来源必须是单一的