Unmounting Lifecycle Methods

1. componentWillUnmount()

當元件將要從 DOM 中被移除之前，React 會執行 componentWillUnmount()。而通常可以在這邊做資源清理的動作，清除與元件有關任何遺留物，像是清除 componentDidMount() 中建立的資源，例如清除timer、取消AJAX request、移除event listener等。

Error Handling Lifecycle Methods

1.componentDidCatch(error, info)

React 在 V16 版後新增了'錯誤邊界' (Error Boundary) 的概念，可以用來捕捉(catch)從子元件(child component tree)中拋出的錯誤(Javascript errors)，避免因為小元件發生意外錯誤而導致整個頁面掛掉，藉此讓錯誤不影響到邊界外層的父元件，可以在componentDidCatch() 決定這個例外錯誤該怎麼處理，像是 'fallback UI'。

Error Boundary 的限制：
* 只能捕捉子元件的錯誤，不包含 Error Boundary 元件本身
* 只能捕捉從 constructor(), render() 和各 Lifecycle Methods 中發生的錯誤
* 非同步 (Asynchronous) 程式中發生的錯誤無法被捕捉
* Event Handler 發生的錯誤無法被捕捉

元件生命週期事件順序

最後整理一下整個Component 的生命週期發生的事件順序。
當元件第一次 render 時的順序：

* constructor
* componentWillMount, getDerivedStateFromProps
* render
* (React 實際更新 DOM / refs)
* componentDidMount

此後，當元件被更新 (update) 時的順序：

* componentWillReceiveProps, getDerivedStateFromProps
* shouldComponentUpdate - 如果 return false 就不會再往下走
* componentWillUpdate
* render
* getSnapshotBeforeUpdate
* (React 實際更新 DOM / refs)
* componentDidUpdate

其中不能執行 this.setState() 的事件：

* render
* componentWillMount
* getDerivedStateFromProps
* shouldComponentUpdate
* componentWillUpdate