React基础4：React生命周期

React生命周期分为以下三个阶段，各阶段分别调用不同方法：

React生命周期.png

接下来，我们一起逐步了解下各个阶段不同钩子函数的应用场景吧~

1、创建阶段

创建阶段依次执行以下函数：

（1）初始化阶段：Constructor()

此时，初始化内部状态，进行显性设置和隐形设置，返回一个实例对象；
在此阶段可以直接修改state，不能用setState修改。
并且在这个阶段，需要使用super()调用基类的构造方法。

（2）挂载阶段：componentWillMount()

该方法在组件挂载到dom前调用，只执行一次，此时调用setState不会触发render函数。

（3）render()

※ 是一个类组件必须有的方法
※ 返回一个顶级的react元素，不能返回并列的元素
※ 此时渲染的是虚拟Dom Tree的一个react对象
※ 不能在render里执行this.setState

（4）componentDidMount()

※ UI渲染完成后调用，且只执行一次
※ 可以获取一些外部数据资源，如从服务端获取异步数据

子组件都创建之后，父组件才完成渲染并执render方法，如下：

image.png

2、更新阶段

（1）componentWillReceiveProps()——不推荐

它在接收到新props时被触发，用于对比新旧props

（2）shouldComponentUpdate()

是否要继续执行render方法，可以用PureComponent替代，比较state和props。

（3）componentDidUpdate()

每次UI更新时调用此方法，可以用来更新外部数据资源。

3、卸载阶段

componentWillUnmount()

组件移除时调用，可以用来做资源释放

附图解：

react生命周期(old).png react生命周期(new).png