react 16ライフサイクル実行順序テスト

プロジェクトのアドレス:https://github.com/wangxiaofeid/react-lifecycle

テスト

最初のレンダー(First Render)

father constructor
father getDerivedStateFromProps
father render
children constructor
children getDerivedStateFromProps
children render
children componentDidMount
father componentDidMount

親コンポーネントデータ修正トリガ再レンダリング

father getDerivedStateFromProps
father shouldComponentUpdate
father render
children getDerivedStateFromProps
children shouldComponentUpdate
children render
children getSnapshotBeforeUpdate
father getSnapshotBeforeUpdate
children componentDidUpdate, snapshot: 1
father componentDidUpdate, snapshot: 1

親コンポーネント呼び出しforceUpdate

father getDerivedStateFromProps
father render
children getDerivedStateFromProps
children shouldComponentUpdate
children render
children getSnapshotBeforeUpdate
father getSnapshotBeforeUpdate
children componentDidUpdate, snapshot: 1
father componentDidUpdate, snapshot: 1

破棄

father componentWillUnmount
children componentWillUnmount

まとめ

旧ライフサイクルの各フェーズでの呼び出し状況

マウント

constructor

componentWillMount

render

componentDidMount

更新

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

render

componentDidUpdate

アンインストール

componentWillUnmount

新しいライフサイクルの各フェーズでの呼び出し状況

マウント

constructor

getDerivedStateFromProps

render

componentDidMount

更新

getDerivedStateFromProps

shouldComponentUpdate

render

getSnapshotBeforeUpdate

componentDidUpdate

アンインストール

componentWillUnmount

親子コンポーネント間のライフサイクル関数の呼び出し順序

マウントフェーズは、renderが実行されたときにのみ親コンポーネントのconstructorが実行を開始し、サブコンポーネントマウント完了(componentDidMount)、親コンポーネントがマウント完了

を計算する

更新フェーズは、マウントフェーズと同様に親コンポーネントのみがrenderに実行され、サブコンポーネントのgetDerivedStateFromProps->shouldComponentUpdate->renderが開始されますが、親コンポーネントのgetSnapshotBeforeUpdateは、サブコンポーネントのgetSnapshotBeforeUpdateに続いて、サブコンポーネントはcomponentDidUpdate

にあります.

親コンポーネント呼び出しforceUpdate

コンポーネントがforceUpdateメソッドを呼び出すとshouldComponentUpdateは実行されず、getDerivedStateFromPropsが実行され、その後renderが実行され、その後のライフサイクルと更新が一致します.