[ Day 11 ] React 的生命周期 - Mounting

在 Class Component 的章节中我们提到过，它有别於 Function Component 的地方就在於 State 和生命周期（ Lifecycle ）。前面几篇为大家介绍了 State 和它的使用方法，今天总算就要进入到生命周期的部分啦！

生命周期（ Lifecycle ）

每个 Component 都有数个 「生命周期方法」（ Lifecycle Method ），你可以在同个元件内使用这些不同的方法，以便在开发过程中某些特定的时刻执行某些程序。

其实我们可以把 React.js 内的每一个 Component 想像成我们自己一样，我们会在人生的不同阶段执行不一样的事情或是履行不同的义务，最後经历生老病死等的过程结束这趟旅程，而 React.js 中的元件也是一样的。它们在不同的生命周期都有官方提供的不同方法可以做使用，让我们可以在指定的阶段去对该元件做操作（没错！那些元件就是操之在我们手中！）。

下面这边附上官网提供的生命周期图来帮助大家更加理解这个概念：

React.js 元件的生命周期发展是由左至右进行的，透过上面的图我们可以了解它主要分为了三个生命周期阶段：

1. Mounting 挂载（安装）
2. Updating 更新
3. Unmounting 卸载（移除）

另外上图中除了有生命周期阶段的区别之外，下方也有附上不同阶段中比较常用到的方法（ Methods ），因此後续针对不同阶段的篇幅就会以较常使用到的方法来做说明。今天的章节就要来介绍第一个生命周期： Mounting ，那就一起往下看吧！

Mounting 挂载

当一个 Class Component 的实体被建立且加入 DOM 中时。

在这个阶段的元件会依照下面的顺序来执行对应的方法：

1. constructor()
2. static getDerivedStateFromProps()
3. render()
4. componentDidMount()

此阶段常用的方法为 constructor() 、 render() 以及 componentDidMount() 这三种方法，下面就为大家来详细介绍：

备注：render() 这个方法也会出现在下一个生命周期阶段 Updating 当中，所以会留到下一篇才帮大家介绍喔！

constructor(props)

constructor() 是 JavaScript ES6 的 Class 语法糖，我们曾经在 Day 09 的时候使用过这个方法来初始化绑定我们的 State 值。

另外要特别注意，官网的文件中有提到如果我们并没有要初始化 State 也没有需要绑定任何的 Methods 时，那就可以不用使用到这个方法了。

但是如果有需要绑定的话，那就必须在其他宣告之前呼叫 super(props) 这个方法。否则在 constructor() 中使用 this.props 的值就会出现错误讯息了。下面就带大家来看范例：

// 在 constructor() 内呼叫 super(props) 
constructor(props) {
    super(props);
    console.log(this.props)
    this.state = {name: 'Angela'};
}

我们可以在 console 区域得到以下的结果：

若我们将 constructor() 内的 super(props) 方法移除後则会在浏览器看到以下的结果：

componentDidMount()

一个 Component 从 ReactDOM 加入 DOM tree 中之後，便会马上呼叫的方法。

在这个阶段时，原本在 ReactDOM 的元件确实被挂载到了浏览器的 DOM tree 当中了，所以这时候我们可以在这个方法内去做 DOM 的操作和绑定。而在官方文件当中也特别推荐这个方法进行实例化网路请求（network request），像是非同步的 API 串接等。

另外，你也可以将需要监听的事件（ Event Listener ）写在这个方法内，因为这个阶段的 DOM 已经顺利挂载完成。不过要特别注意，如果有绑定监听事件的话要记得在第三个生命周期： Unmounting 中的 componentWillUnmount() 方法中来解除该监听事件，否则当重新渲染画面时又会再次监听事件了。

对於生命周期的第一阶段 Mounting 就介绍到这，其实这个阶段中还有一个方法 static getDerivedStateFromProps() 没有介绍到，如果大家有兴趣的话这边附上官网的传送门。

而 render() 这个方法，我们将於明天的章节： Updating 生命周期中一并介绍喔！
那今天先到这边告一个段落了，欢迎大家多多指教！
我们下篇见ʘ‿ʘ