reactのLifeCycleについて超入門&従来のJSライブラリとの違いについて簡単にまとめた

#従来のJSライブラリとの違い

1. サーバーのデータから全HTMLを作成(共通)
2. イベント検出(共通)
3. データ変更やサーバとの通信など必要な処理を行う(共通)
4. 画面上の変更が必要な箇所を コーディング によって置き換える(従来) <-> 仮想DOMを利用して自動的 にDOMを部分更新してくれる(React)

→大規模アプリケーションに強い

#Lifecycle
Lifecycle:Componentの生まれてから死ぬまでの流れを表現したもの。
React.Componentの機能で、Componentを継承したクラス内で使用可能。
→Mount系 / Update系 / Unmount系 / Error Handling系に分かれる。

##Mount系
These methods are called when an instance of a component is being created and inserted into the DOM
→class内最初のrender()がMountと思っていいのでは？
ex.

• constructor()
• componentWillMount()
• render()
• componentDidMount()

##Update系
An update can be caused by changes to props or state. These methods are called when a component is being re-rendered
→2回目以降のrender()がUpdate
ex.

• componentWillReceiveProps()
• shouldComponentUpdate()
• componentWillUpdate()
• render()
• componentDidUpdate()

##Unmount系
This method is called when a component is being removed from the DOM
→DOMからの削除がUnmount
componentWillUnmount()のみ

##Error Handling
This method is called when there is an error during rendering, in a lifecycle method, or in the constructor of any child component
→Lifecycle　methodや子要素のconstructor()でエラーが起きた時に呼ばれる
componentDidCatch()のみ

##使用例

• componentDidMount()でEventを登録→componentWillUnmount()で削除
• アプリが重くなってきたらshouldComponentUpdate()で軽くする

##簡単な図解のまとめ

##補足
componentWillMount / componentWillReceiveProps / componentWillUpdateなどは廃止予定
→代わりにstatic getDerivedStateFromProps()ができた。
componentのインスタンス化の後、propsの取得後に発火