前言

近年前端技术层出不穷，Facebook 推出的 React 也是程序员间讨论最多的 Javascript 框架之一。借这个机会开始学习 React，并把笔记作为 React 基础教程系列（参考 React 官网）。

因为属于入门，不太适合对 React 有经验的同学，但希望到此的同学多少都有所收获。

为了更好的阅读体验，可以在文章底下的“了解更多”中查看原文。

重要性

了解一个框架，最好的办法就是对它的整个生命周期在不同阶段在干那些事情给搞明白；这样也对编写代码更有帮助，能减少 bug，也能增加程序的合理性。

套用 vue 官网那句话：随着你的不断学习和使用，它的参考价值会越来越高。如果你有一定的经验，相信知道这是个实实在在的大白话（起码我是这么认为的）。

生命周期图例

React 对它的生命周期分类两类（常用、不常用），这样非常友好，能让刚学习 React 的同学只关注相对重要的那方面。

常见的生命周期：

整个生命周期流程：

细说：生命周期 API

API 分类

挂载

组件实例创建后插入 DOM 中时，触发的方法：

更新

• 其不属于生命周期，但可以通过此方法来强制让 render 刷新，同时跳过 shouldComponentUpdate

卸载

• componentWillUnmount()

constructor（常用）

因为是 class 方式定义的组件，在子类创建时，会先触发构造函数。定义的构造函数需要调用 super(props) 定义好 ，以避免不必要的 bug 。

constructor 可以省略，通常会有以下两种使用场景：

componentDidMount（常用）

componentDidMount 和 componentWillUnmount 对应，如果有监听订阅等方法时，分别在这两个周期内执行订阅和取消。

不建议在 componentDidMount 是使用 setState() 方法，因为会触发多次渲染方法，即使用户看不到 state 数据的变化过程，但因为 DOM 已经首次渲染到页面上，会有性能问题的产生。

能看到后面的红框又触发了 render 方法：

render（常用）

这是每个 class 组件必须实现的方法，并且执行 render 渲染将返回一个纯函数 function 。

这个函数通常是如下几种结果：

需要注意，当 shouldComponentUpdate 为 false 时，render 就不会被调用。

componentDidUpdate（常用）

在 props ，state 更新后，会触发此方法：

上述是个经典的用法示例，如果没有这层 if 判断，会使得所有的更新都会触发我们定义的逻辑方法（比如，异步请求 api 将相当耗费资源）

componentWillUnmount（常用）

应该在此方法中销毁，卸载一些方法，诸如：定时器。以确保在组件移除时，不会对整个应用有"负面消耗"。

虽然此方法是组件销毁前执行，但不要在其中调用 setState 方法，因为不会再触发 render 渲染流程。

getDerivedStateFromProps

根据名字定义，当 props 更新后，计算得到派生的 state。

下面会详细举例两个关于"派生 state"的问题，从而来更详细的了解 getDerivedStateFromProps 方法：

shouldComponentUpdate

shouldComponentUpdate 在 state 更新，以及新的 props 传入时触发，并且在 getDerivedStateFromProps 之后。

注意：首次渲染，以及 forceUpdate 不会触发此方法。

shouldComponentUpdate 仅仅作为性能优化而使用。通过返回 true/false 来告诉 React 是否要进行更新。

从而避免调用 componentWillUpdate、render、componentDidUpdate 方法。

另外 React.Component 内部没有实现 shouldComponentUpdate 方法，而 React.PureComponent 会以浅比较方式来对比，以代替 shouldComponentUpdate 。

这里要说下 PureComponent 类：

和 React.Component 不同，其内部会通过浅比较的方式来对比 props 和 state 对象，来触发 React 更新。

以用来代替生命周期中的 shouldComponentUpdate 实现。

注意，因为是浅比较，如果是数组等类型的数据，将不会触发 render：

getSnapshotBeforeUpdate

在更新渲染之前会调用此方法，我们可以在这里设置一些逻辑值，最后可以在 componentDidUpdate 方法中得到。

总结

所谓一图胜千言，上面再多对生命周期方法做的介绍，都不如仔细把两张图谱铭记于心。

只有这样，才能尽可能提升 React 的编程设计能力，减少 bug 等问题的发生。