2.0 React 组件0 组件的生命周期

参考链接：https://www.jianshu.com/p/514fe21b9914

 https://blog.csdn.net/c_kite/article/details/80303341

 

react为什么需要引入新的生命周期函数？

react V16.0前的生命周期。

1 组件初始化。2 挂载 。 虚拟dom->真实dom。 3 更新（props父组件进行更新，本身调用this.state()刷新） 4 卸载。

旧版本的生命周期函数。 react16.8.4 

过程设计到的动作术语：

1 mounting 表示正在挂载虚拟DOM到 真实的DOM。

2 updating 表示 重新渲染。

3 unmounting 表示正在将虚拟DOM 移除真实的DOM。

1 初始化阶段。（实例化阶段）

ES5采用React.createElement, 完成实例化。而ES6采用集成的方式定义类组件。

1 constructor ，state，：填充state的数据。由ReactDOM.render（）触发，初次渲染

2 渲染前 执行。

3 render ：1创建虚拟DOM，porps读取属性，state读取数据，并且根据读取的数据，生成虚拟的DOM。

render方法返回虚拟dom和实际的dom进行对比i，决定要更新的dom。

4 浏览器DOM 被渲染后，DOM 已经被创建，。对state的填充，比如ajax的请求。

　　（常用！！！！出生的那一天，）componentDIdMount：常用，初始化的事情，开启定时器，发送网络请求，订阅消息。

2 更新阶段（活动阶段）： 要么是组件内部this.setState()要么是 父组件 render触发。

 1 父组件传值。 组件将要接受props。 初始化渲染不会被调用，更新的时候才被调用。

　2 是否要更新。

　3 组将即将更新。

　 （常用！！！）4 render

　5 组件更新后，操作dom。

3 卸载组件（）

 （常用！！！！死亡的那一天）component 收尾的事情，：关闭定时器，取消订阅消息。

新的生命周期。 react 16.3 和react16.4引起了巨大改变。

废弃了3钩子，willmount，wiilupdate，wiil recevieprops.

变化成为 getDeviceerStateFromProps。

还有一个添加的就是真实dom确定后，有一个快照的功能。可以查看DOM，不能修改dom。

getDerivedStateFromProps，getSnapshotBeforeUpdate

static getDerivedStateFromProps(props, state) 在组件创建时和更新时的render方法之前调用，它应该返回一个对象来更新状态，或者返回null来不更新任何内容。

 

render结束 ，真实dom创建完成！

getSnapshotBeforeUpdate（读取dom，但是无法使用DOM。就是拍个快照！！！）

被调用于render之后，可以读取但无法使用DOM的时候。它使您的组件可以在可能更改之前从DOM捕获一些信息（例如滚动位置）。此生命周期返回的任何值都将作为参数传递给componentDidUpdate（）。