Reactライフサイクルの詳細な説明

React のライフサイクルは、初期化フェーズ、更新フェーズ、破棄フェーズに分かれています。初期化は DOM ツリー内のコンポーネントの最初のレンダリングを表し、更新はコンポーネントを再レンダリングするプロセスを表します。破棄は DOM からコンポーネントを削除するプロセスを表します

React は、ユーザーのビルドに使用される JavaScript ライブラリです。主に UI の構築に使用され、パフォーマンスが高く、コード ロジックが非常にシンプルです。今日紹介するのは一定の参考効果があるReactのライフサイクルですので、皆様のお役に立てれば幸いです。

#【おすすめコース: react チュートリアル】

反応ライフサイクルは、初期化ステージ、更新ステージ、破棄ステージの 3 つのステージに分かれています。次に、この記事で詳しく紹介します。

初期化フェーズ:

つまり、コンポーネントが初めて DOM ツリーにレンダリングされます

import React, { Component } from 'react';

class Test extends Component {
  constructor(props) {
    super(props);
  }
}

初期化フェーズは、上記のコードのクラスの構築メソッドと同じです。Test クラスは、react Component 基本クラスを継承します。これは、react 基本クラスの継承と同等であるため、render() は、つまり、ライフサイクルやその他の方法を使用できます。コード内の

Super(props) は、主に基本クラスのconstructor() を呼び出すために使用され、また、子コンポーネントが読み取れるように、親コンポーネントの props を子コンポーネントに挿入します。ここで注意する必要があるのは、コンポーネント内の props は読み取り専用で不変ですが、状態は変更可能であるということです。

#constructor() は、this.state での初期コンテンツの定義など、一部のコンポーネントを初期化するために使用されます。

更新フェーズ:

コンポーネントが再レンダリングされるプロセス

プロップまたはステートが変更されると、コンポーネントの更新プロセスがトリガーされます

componentWillReceiveProps（nextProps）

親コンポーネントのレンダリング関数が呼び出されるとき、レンダリングでfunction でレンダリングされた子コンポーネントはすべて更新プロセスを実行します。親コンポーネントによって子コンポーネントに渡された props が変更されたかどうかに関係なく、componentWillReciveProps がトリガーされます。

更新がトリガーされることに注意してください。 this.setState は上記のメソッドを呼び出しません。 this.setState の呼び出しによって上記のメソッドがトリガーされると、無限ループが発生します。 nextProps と this.props が変更された場合にのみ、this.setState が呼び出され、コンポーネント内の状態が更新されます

shouldComponentUpdate（nextProps，nextState）

このメソッドは、コンポーネントをレンダリングする必要がない時期を決定します。適切に使用すると、パフォーマンスが向上します

true が返された場合、componentWillUpdate、render、componentDidUpdate が呼び出されます。それ以外の場合、後続のメソッド呼び出しは行われません。

実際、React がサーバーサイド レンダリングを行う場合、基本的には更新プロセスを経ません。サーバーサイド レンダリングでは HTML 文字列を生成するだけでよく、初期化フェーズは達成できるため、通常では状況によっては、サーバーは compentDidUpdate メソッドを呼び出しません。このメソッドが呼び出された場合は、プログラムに問題があり、改善する必要があることを意味します。

破棄フェーズ:

コンポーネントが DOM から削除されることを意味します。プロセス

破棄フェーズにはライフサイクル メソッドが 1 つだけあります:

componentWillUnmount

このメソッドは、コンポーネントが破棄される前に呼び出され、主に次のことを実行します。メモリリークの発生を避けるための、コンポーネントで使用されるタイマーのクリア、componentDidMount 手動で作成された DOM 要素などのクリーンアップ作業。

要約: 以上がこの記事の全内容です。皆様のお役に立てれば幸いです。

以上がReactライフサイクルの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。