React クラスコンポーネントのライフサイクルと実行順序

1. Reactコンポーネントを定義する2つの方法

1. 関数コンポーネント。単純な関数コンポーネントは次のようになります。これは、Props を受け取って、他のロジックを考慮せずに DOM をレンダリングします。

関数 Welcome(props) {
  <h1>Hello, {props.name}</h1> を返します。
}

関数コンポーネントは State を使用できず、コンポーネントのライフサイクル メソッドも使用できません。関数コンポーネントにはこれがなく、純粋に表示コンポーネントです。

提案: コンポーネントを作成するときは、まずそのコンポーネントを表示コンポーネントとして作成する必要があるかどうかを検討してください。表示コンポーネントとして作成できる場合は、表示コンポーネントとして作成してみてください。

2. クラスコンポーネントはReact.Componentを継承し、State、ライフサイクル、そしてこれを持つ必要があります。

3. 共通点

a. コンポーネントが関数またはクラスを使用して宣言されているかどうかにかかわらず、コンポーネント自身のpropsを変更してはならない。

b. すべてのReactコンポーネントは純粋な関数でなければならず、自身のpropsを変更することは禁止されています。

c. React は一方向のデータフローです。親コンポーネントがプロパティを変更すると、子コンポーネントのビューが更新されます。

d. propsプロパティは外部から渡され、 stateはコンポーネント自体です。状態はコンポーネント内で任意に変更できます。

e. コンポーネントのプロパティと状態の変更によりビューが更新されます

4. コンポーネント定義に関する注意事項

a. コンポーネント名は大文字で始まる必要があります

b. コンポーネントの戻り値はルート要素を1つだけ持つことができる

2. クラスコンポーネントのさまざまな段階でのライフサイクル関数の実行順序

1. クラスコンポーネントの実行順序は次の通りです

新機能: getDerivedStateFromProps、getSnapshotBeforeUpdate

UNSAFE: UNSAFE_componentWillMount、UNSAFE_componentWillUpdate、UNSAFE_componentWillReceiveProps はバージョン 17 以降で削除されます。

マウントとは、コンポーネントがインスタンス化され、次の順序で DOM に挿入されることを意味します。

コンストラクター -> getDerivedStateFromProps -> レンダリング -> componentDidMount

更新とは、状態またはプロパティが変更されたときに更新が発生することを意味します。順序は次のとおりです。

getDerivedStateFromProps -> shouldComponentUpdate -> render -> getSnapshotBeforeUpdate -> componentDidUpdate

アンマウントとは、コンポーネントがDOMから削除され、1つのライフサイクルのみが実行されることを意味します: componentWillUnmount

2. コンストラクター（）：React コンポーネントがマウントされると、そのコンストラクターが最初に呼び出されます。

目的: 通常、React ではコンストラクターで次の 2 つのことだけを実行します。

a. this.state にオブジェクトを割り当てて内部状態を初期化します。

b. インスタンスをイベント処理関数にバインドする

知らせ：

a. React.Component サブクラスのコンストラクターを実装する場合は、他のステートメントの前に super(props) を呼び出します。

そうでなければ、コンストラクタ内で this.props が未定義になる可能性があります。

b. setStateを内部で呼び出さない

3. React コンポーネントがマウントされたときにレンダリングする前の componentWillMount()。

機能: setState メソッドを呼び出して状態を変更できます。同期メソッドはブロックし、二次レンダリングは発生しませんが、非同期メソッドはブロックせず、

2 回目のレンダリングを実行します。

注意: このメソッドは安全ではないとマークされているため、使用しないでください。

4. getDerivedStateFromProps((props, state)、静的メソッド、propsをコンポーネントの内部状態に更新するために、

ダウンロードおよび更新時に呼び出されます。

効果：

a. propsに基づいて無条件に内部状態を更新する。つまり、prop値が渡される限り状態を更新する。

b. プロパティ値と状態値が異なる場合にのみ状態値を更新する

知らせ：

a. メソッド内では使用できません

b. props によって渡されたコンテンツが状態に影響を与える必要がない場合は、null を返す必要があります。この戻り値は必須です。

必要なので関数の最後に記述するようにしてください。

非同期処理:

以前は、プロパティが変更されたときに、componentWillReceiveProps で非同期操作を実行できました。

プロパティの変更により状態も変化します。

reactのsetState操作はトランザクションを介してマージされ、バッチ更新プロセスになりますが、react

更新プロセスのほとんどは setState によってトリガーされるため、レンダリングがトリガーされる頻度はそれほど頻繁ではありません。

さて、propsの変更に対応するために、componentDidUpdateで非同期操作を実行して変更に対応する必要があります。

5. shouldComponentUpdate(nextProps, nextState)、更新時、つまり状態またはプロパティが変更されたとき、

レンダリングが実行される前に呼び出されます

効果：

a. パフォーマンスが最適化されたライフサイクル方式。この方法では、変更されたプロパティと状態を取得できます。これは、元のプロパティと状態と一致しています。

レンダリングが必要かどうかを判断する

知らせ：

a. このメソッドの戻り値は true または false である必要があります。false が返された場合、レンダリングは実行されません。

6. render()はクラスコンポーネントで実装する必要がある唯一のメソッドであり、純粋関数である。

効果：

a. コンポーネントとDOMノードがここに記述され、編集後のReact.createElementの式であるjsxが返されます。

知らせ：

a. コンポーネント名の最初の文字は大文字にする必要があります

b. ルートノードは1つだけ存在できる

c. ルートノードとして<></>を使用できます。このノードはレンダリングされません。これはReact.Fragmentの略語です。

7. getSnapshotBeforeUpdate(prevProps, prevState)、最新のレンダリング出力（DOMノードに送信）

以前に呼び出され、テストに拡張されず、理解はこれに限定されます

効果：

a. 変更が発生する前に、コンポーネントが DOM からいくつかの情報 (スクロール位置など) を取得できるようになります。このライフサイクルのいずれか

戻り値はcomponentDidUpdate()にパラメータとして渡されます。

8. コンポーネントがマウントされた（DOMツリーに挿入された）直後に呼び出されるcomponentDidMount()

効果：

a.setState

b. DOMを操作する

c. 初期データを取得するためのリクエストを送信する

9. 更新後すぐにcomponentDidUpdate(prevProps, prevState)が呼び出されます（DOMが更新されました）

効果：

a.setState

b. DOMを操作する

c. データを取得するためのリクエストを送信する

知らせ：

a. setState は条件文で囲む必要があります。そうしないと、無限ループが発生します。

10. コンポーネントがアンインストールされ破棄される直前に呼び出されるcomponentWillUnmount()

機能: タイマーのクリア、removeEventListenerなどのリソースをここで解放できます。

注意: setStateはここでは無効であり、呼び出すことはできません。

11. getDerivedStateFromError まだ詳細は理解されていない

12.componentDidCatchはまだ詳細が理解されていない

3. 参考

公式ライフサイクル API https://react.docschina.org/docs/react-component.html

React クラス コンポーネントのライフサイクルに関するこの記事はこれで終わりです。React クラス コンポーネントに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。