機能のライフサイクルに反応する - ノート08が反応

リアクトでは、関数のライフサイクルが自動的に実行される時にコンポーネントの機能を指します。また、フック関数と呼ばれるライフサイクル機能。

コンストラクタは自動的にコンポーネントが作成されたときに実行するだけでなく、ライフサイクル機能(通常のクラスサイクル機能)が、独自のライフサイクル機能を反応しません。

レンダリング機能は、データの変更は、自動的に機能をレンダリングする際にライフサイクルの機能が反応です。

コンポーネントのライフサイクル機能、各コンポーネントがそのライフサイクル機能を有しています。

初期相成分(初期化)

ライフサイクルの機能を反応しませんでした。

この舞台小道具や状態データを設定するために使用されます。

コンストラクタ関数は、ライフサイクルを持っています。

ページ2ステージマウント(取り付け)

上記のhtmlページに対応するデータを表示します。

componentWillMount:アセンブリページ上に取り付け、マウントする前に自動的に実行されようとしています

              ⬇️

            レンダリング:ときにページのレンダリング、自動実行

      ⬇️

componentDidMount:部品を実装されているが完了すると、自動的にマウントを行い、

フェーズ3のデータ更新(Updation)

データが変更された後、更新用ステージが始まりました。

データ変更を述べています:

shouldComponentUpdate:更新前の自動実行は、デフォルトでtrueにすることをブール値を返す必要があります。そして、時には、データの変更が、同じページ、繰り返しページをレンダリングするためのレンダリング機能を使用する必要はありません、

              shouldComponentUpdateの戻り値がfalseに設定され、その後の3点のライフサイクルが実行されることはありません、あなたは、この問題を解決するためのページのパフォーマンスを向上させることができます。

    ⬇️

componentWillUpdate:コンポーネントは、ページ上に更新されます

            ⬇️

          与えます

      ⬇️

componentDidUpdate:コンポーネントが更新されました

データ変更を小道具:

componentWillReceiveProps:サブアセンブリ受信小道具の更新が発生した場合にのみ1つの成分が時間のサブコンポーネントであり、ライフサイクル機能が自動的に実行存在します

    ⬇️

shouldComponentUpdate:更新前の自動実行は、デフォルトでtrueにすることをブール値を返す必要があります。そして、時には、データの変更が、同じページ、繰り返しページをレンダリングするためのレンダリング機能を使用する必要はありません、

              shouldComponentUpdateの戻り値がfalseに設定され、その後の3点のライフサイクルが実行されることはありません、あなたは、この問題を解決するためのページのパフォーマンスを向上させることができます。

    ⬇️

componentWillUpdate:旧コンポーネントのアップデート、shouldComponentUpdate実行後、自動実行

            ⬇️

          :レンダリング componentWillUpdate実行後、元のコンポーネントのアップデートを、自動実行

      ⬇️

componentDidUpdate:コンポーネントが更新されました

4は(アンマウント)組立段階の前に除去されます

コンポーネントが破棄されようとしているときcomponentWillUnmount自動的に実行されるであろう。

-------------------------------------------------- -------------------------------------------------- ---------------------

ライフサイクル機能の使用例

ページ上のテキストを実装し、windowclickを印刷するには、コンソールをクリックします。

1⃣️div要素は、そのページが最初にロードされた後、他の人の間でテキストの一部をクリックしてテキストにバインドクリック機能は、テキストをクリックし、印刷し、その後、他の部分はwindowclickに印刷されますクリックしていません

2⃣️componentDidUpdateのライフサイクル機能にバインドクリック機能はとてもページが読み込まれた後、windowclick印刷されるページ上の任意の場所をクリックすること

ページだけでなく、他のコンポーネント、またはコンポーネントが削除され、新しいコンポーネント場合3⃣️も、componentWillUpdateライフサイクル関数にクリック機能を結合するが、コンポーネントが作成されたら、そうすることは、問題を抱えていることができますページに表示されますが、破壊されない追加のコンポーネントの結合グローバル、別のコンポーネントは、ページ上に実装後、グローバルイベントを結合成分は、他のコンポーネントに影響を与えます!コンポーネントがページから削除されたときに、それが必要であるので、あなたはcomponentWillUnmount機能でアンバンドリングイベントウィンドウをバインドしたいです。

4⃣️コンポーネントは、我々はそのような一般的axiosとして使用されるように、サードパーティ製のツールを使用する必要があり、Ajaxは何も既製のツールが存在しない反応して、リモートサーバーからデータを取得します。

あなたは最初のコマンドを実行し、axiosツールをインストールする必要があります:NPMはaxios --saveをインストール

その後、axiosパッケージの導入。

ライフサイクルcomponentDidMountで一般的には、伝送AJAX要求機能

おすすめ

転載: www.cnblogs.com/superjishere/p/12105906.html