最終更新:2024-04-17 (水) 17:21:07 (2d)
React/コンポーネント/ライフサイクル
https://ja.reactjs.org/docs/react-component.html#the-component-lifecycle
https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
タイミング
マウント
- コンポーネントのインスタンスが作成されて DOM に挿入されるときに、これらのメソッドが次の順序で呼び出されます。
- constructor?()
- static getDerivedStateFromProps?()
- render()
- componentDidMount()
更新
- 更新は props や state の変更によって発生する可能性があります。コンポーネントが再レンダーされるときに、これらのメソッドは次の順序で呼び出されます。
- static getDerivedStateFromProps?()
- shouldComponentUpdate?()
- render()
- getSnapshotBeforeUpdate?()
- componentDidUpdate()
アンマウント
- このメソッドは、コンポーネントが DOM から削除されるときに呼び出されます。
- componentWillUnmount()
エラーハンドリング
React/クラスコンポーネント
- render メソッドは更新が発生した際に毎回呼ばれますが、同一の DOM ノード内で <Clock /> をレンダーしている限り、Clock クラスのインスタンスは 1 つだけ使われます
- このことにより、ローカル state やライフサイクルメソッドといった追加の機能が利用できるようになります。
React 17以降は非推奨
React 16.3で変更
- React 17で削除
