• 本文
• リロード
• 差分
• バックアップ
• 名前変更
• リファラ
• 新規ページ
• 編集

React/コンポーネント

React/コンポーネント/ライフサイクル

Top / React / コンポーネント / ライフサイクル

タイミング

マウント

• コンポーネントのインスタンスが作成されて DOM に挿入されるときに、これらのメソッドが次の順序で呼び出されます。

• constructor?()
• static getDerivedStateFromProps?()
• render()
• componentDidMount?()

更新

• 更新は props や state の変更によって発生する可能性があります。コンポーネントが再レンダーされるときに、これらのメソッドは次の順序で呼び出されます。

• static getDerivedStateFromProps?()
• shouldComponentUpdate?()
• render()
• getSnapshotBeforeUpdate?()
• componentDidUpdate()

アンマウント

• このメソッドは、コンポーネントが DOM から削除されるときに呼び出されます。
• componentWillUnmount?()

React/クラスコンポーネント

• render メソッドは更新が発生した際に毎回呼ばれますが、同一の DOM ノード内で <Clock /> をレンダーしている限り、Clock クラスのインスタンスは 1 つだけ使われます
• このことにより、ローカル state やライフサイクルメソッドといった追加の機能が利用できるようになります。