React基础篇（一）：React生命周期及其使用场景

1、首先介绍一下生命周期三个类型和三个阶段

三个类型：创建时、更新时、卸载时

三个阶段：“Render”阶段、“Pre-commit”阶段、“Cimmit”阶段

2、生命周期方法的调用过程

①创建时：

一、“Render”阶段

先执行构造函数constructor：一个组件首先要创建出来

getDerivedStateFromProps：用于从一些外部的属性初始化一些状态，从这个方法返回的状态都可merge到当前的状态上

render：描述你的UI的dom结构的地方，这个也是唯一一个必须定义的生命周期方法

二、“Pre-commit”阶段

无生命周期方法

三、“Cimmit”阶段

（React先更新Dom和refs）

componentDidMount：可以做一些想发起Ajax请求、处理一些定义的外部资源等有副作用的事情

②更新时：

大概三种方式触发更新：

New props、setState()、forceUpdate()

一、“Render”阶段

getDerivedStateFromProps：（创建时里已经讲过）

shouldComponentUpdate：这个方法可以对更新做一些“拦截”，在这个里面可以做一些性能优化的事情，比方说props发生了变化，但是UI不需要发生变化，这个时候你就可以返回false就不更新UI。

render：计算背后的虚拟dom，用来维持内部的一些UI的状态，计算一些diff等等

二、“Pre-commit”阶段

getSnapshotBeforeUpdate：获取render之前的DOM状态，具体使用

三、“Cimmit”阶段

（React先更新Dom和refs）

componentDidUpdate：可以在update之后自己定义一些需要的事情：比方说你有一篇文章是根据url中id作为参数来决定显示什么内容，在这里可以根据id获取文章内容

③卸载时：

卸载时直接进入“cimmit”阶段

componentWillUnmount：可能会做一些资源释放的事情

3、具体的生命周期方法

一、constructor：

①用于初始化内部状态，但是使用较少

②唯一可以直接修改state的地方

二、getDerivedStateFromProps：

①当state需要从props初始化的时候使用

②尽量不要使用：维护两者状态一致性会增加复杂度

③每次render都会调用

④典型场景：表单控件获取默认值

三、componentDidMount

①UI渲染完成后调用

②只执行一次

③典型场景：获取外部资源