従来のJSライブラリとの違い
- サーバーのデータから全HTMLを作成(共通)
- イベント検出(共通)
- データ変更やサーバとの通信など必要な処理を行う(共通)
- 画面上の変更が必要な箇所を コーディング によって置き換える(従来) <-> 仮想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の取得後に発火