React 的生命周期（一）

React 的生命周期（一）

React 15 中的生命周期，有一下几个：

constructor()                  // 定义组件时，执行生命周期, 一般state会在里面初始化

componentWillReceiveProps(nextProps)  // 父组件修改组件的props时会调用(官方文档：父组件每次render时都会调用)

shouldComponentUpdate(nextProps, nextState) // 组件更新时调用

componentWillMount()           // 初始化渲染时调用 render之前

componentWillUpdate(nextProps, nextState)  // 组件更新时调用

componentDidUpdate()           // 组件更新后调用

componentDidMount()            // 初始化渲染时调用， render之后

render()                       // 执行渲染虚拟DOM

componentWillUnmount()         // 组件卸载时调用

组件的生命周期主要有三个阶段：

Mounting 阶段：组件的初始化渲染（挂载）

挂载过程在组件的一生中仅会发生一次，在这个过程中，组件被初始化，然后会被渲染到真实 DOM 里，完成所谓的“首次渲染”。

componentWillMount、componentDidMount 方法同样只会在挂载阶段被调用一次。

componentWillMount

是属于render阶段的生命周期函数，在执行过程中，可能会被 React 暂停，中止或重新启动，如果在这里进行异步请求操作的时候，很可能被中间终止或者重新启动，所以在处理一些操作的时候，很鸡肋，这也是为什么componentWillMount被React 抛弃的原因。

componentDidMount

属于commit 阶段，渲染结束后被触发，此时因为真实 DOM 已经挂载到了页面上，我们可以在这个生命周期里执行真实 DOM 相关的操作。此外，类似于异步请求、数据初始化这样的操作也大可以放在这个生命周期来做。

Updating 阶段：组件的更新

组件的更新分为两种：一种是由父组件更新触发的更新；另一种是组件自身调用自己的 setState 触发的更新。

componentWillReceiveProps

从图中不难看出 componentWillReceiveProps 是由父组件更新触发的。有一种说法是props发生改变触发的，但是官方文档明确写出，是由父组件更新所触发的。在这个生命周期方法里，nextProps 表示的是接收到新 props 内容，而现有的 props （相对于 nextProps 的“旧 props”）我们可以通过 this.props 拿到，由此便能够感知到 props 的变化，从而来进行一些逻辑判断。

componentWillUpdate 和 componentDidUpdate

componentWillUpdate 会在 render 前被触发，它和 componentWillMount 类似，允许你在里面做一些不涉及真实 DOM 操作的准备工作；而 componentDidUpdate 则在组件更新完毕后被触发，和 componentDidMount 类似，这个生命周期也经常被用来处理 DOM 操作。此外，我们也常常将 componentDidUpdate 的执行作为子组件更新完毕的标志通知到父组件。

shouldComponentUpdate

render 方法由于伴随着对虚拟 DOM 的构建和对比，过程可以说相当耗时。而在 React 当中，很多时候我们会不经意间就频繁地调用了 render。为了避免不必要的 render 操作带来的性能开销，React 为我们提供了 shouldComponentUpdate。

React 组件会根据 shouldComponentUpdate 的返回值，来决定是否执行该方法之后的生命周期，进而决定是否对组件进行re-render（重渲染）。shouldComponentUpdate 的默认值为 true，也就是说“无条件 re-render”。在实际的开发中，我们往往通过手动往 shouldComponentUpdate 中填充判定逻辑，或者直接在项目中引入 PureComponent 等最佳实践，来实现“有条件的 re-render”。

Unmounting 阶段：组件的卸载

componentWillUnMount

组件销毁的常见原因有以下两个：

1. 组件在父组件中被移除了：这种情况相对比较直观，对应的就是我们上图描述的这个过程。

2. 组件中设置了 key 属性，父组件在 render 的过程中，发现 key 值和上一次不一致，那么这个组件就会被干掉。