React 组件的生命周期

Posted 2020-08-07

一段探索React自建内部构造的旅程

在先前的文章里我们涵盖了React基本原理和如何构建更加复杂的交互组件（基础教程qkxue.net）。此篇文章我们将会继续探索React组件的特性，特别是生命周期。

稍微思考一下React组件所做的事，首先想到的是一点是：React描述了如何去渲染（DOM）。我们已经知道React使用render()方法来达到这个目的。然而仅有render()方法可能不一定都能满足我们的需求。如果在组件rendered之前或之后我们需要做些额外的事情该怎么做呢？我们需要做些什么以避免重复渲染(re-render)呢？

看起来我们需要对组件（运行）的各个阶段进行控制，组件运行所有涉及的各个阶段叫做组件的生命周期，并且每一个React组件都会经历这些阶段（腾云科技ty300.com）。React提供了一些方法并在组件处于相应的阶段时通知我们。这些方法叫做React组件的生命周期方法且会根据特定并可预测的顺序被调用。

基本上所有的React组件的生命周期方法都可以被分割成四个阶段：初始化、挂载阶段（mounting）、更新阶段、卸载阶段（unmounting）。让我们来近距离分别研究下各个阶段。

初始化阶段

初始化阶段就是我们分别通过getDefaultProps()和getInitialState()方法定义this.props默认值和this.state初始值的阶段。

getDefaultProps()方法被调用一次并缓存起来——在多个类实例之间共享。在组件的任何实例被创建之前，我们（的代码逻辑）不能依赖这里的this.props。这个方法返回一个对象并且属性如果没有通过父组件传入的话相应的属性会挂载到this.props对象上。

getInitialState()方法也只会被调用一次，（调用时机）刚好是mounting阶段开始之前。返回值将会被当成this.state的初始值，且必须是一个对象。

现在我们来证明上面的猜想，实现一个显示的值可以被增加和减少的组件，基本上就是一个拥有“+”和“-”按钮的计数器。