[ Day 12 ] React 的生命周期 - Updating

今天要来进入到生命周期的第二个环节： Updating 更新，继上篇的 Mounting 元件挂载阶段中提到过有一个方法是在 Updating 阶段也会出现的，那我们就接着继续看下去吧！

Updating 更新

当一个 Component 内的 props 或 state 的值有变化时，就会产生更新（ Update ）并重新渲染画面。

按照官网文件的说明，这个阶段的元件会依照下面的顺序来执行对应的方法：

1. static getDerivedStateFromProps()
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate()
5. componentDidUpdate()

这边我们一样针对较常用的 render() 和 componentDidUpdate() 这两个方法来为大家介绍：

render()

为 Class Component 中唯一必要的方法。

在上一篇 Day 11 中我们有提到过 render() 方法是同时出现在 Mounting 和 Updating 两个生命周期中的。

这个方法最主要的工作就是要去检视 this.props 和 this.state 中的变化，并在发现变化後将 return() 陈述式当中所撰写的 JSX 渲染到画面上。所以我们在过去的篇幅中一再强调，当 props 和 state 的值产生变化时会重新渲染画面（ Re-render ）的原因，其实就是因为它再次执行了 render() 这个方法。

// return() 陈述式范例
return (
  <div>
    <h1>Hello, world!</h1>
  </div>
);

另外这里要注意一个小细节， render() 是在画面确实挂载和渲染之前的最後一个生命周期方法，所以在这个阶段请不要去操作任何在 return() 陈述式中的 DOM ，因为这时候这些 ReactDOM 并还没有真的被挂载到 DOM tree 上面。

componentDidUpdate(prevProps, prevState, snapshot)

这个方法会於元件再次的更新後才会马上被呼叫。

所以 componentDidUpdate() 在元件的第一次渲染（ render ）时并不会被呼叫，只有当它检视到 props 和 state 的值产生变化并再次渲染後才会呼叫到这个方法。

在这个方法里面，官方文件推荐大家除了可以针对 DOM 进行操作之外，也非常适合做 API 等网路请求。尤其在 props 的值前後有变化的状况下，可以去触发网路请求来获取新的值。

// 在 componentDidUpdate 方法中比较新旧 props 的值
componentDidUpdate(prevProps) {
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

上面的官网范例程序码中，我们在 componentDidUpdate() 中使用了 prevProps 参数来比对新旧的 props 值是否有产生变化？再依照判别式的结果做出对应的操作。

备注：prevProps 这个参数顾名思义就是指之前的 props 值，其他参数的使用和功能可以参考这篇 Andy 大大的文章：【React.js入门 - 19】 React生命周期(4/4): Update系列一次讲完 里面有非常详细的说明。

Updating 更新的这个生命周期就到这边先结束罗！这里一样还是有很多比较不常用的生命周期方法，大家如果有兴趣研究的话可以去官网的文件中参考看看。
不过这系列的文主要是针对 React.js 的初学者比较会接触和使用到的功能来做介绍，所以这边就不会再多做其他方法的说明了。

非常谢谢看到这里的大家，如果有任何问题的话真的很欢迎各位大大指教！下一篇就会是最後一个生命周期： Unmounting 了唷～
那我们就下篇见ʘ‿ʘ