父とコンポーネントのライフサイクル：
「ライフサイクル」反射ロマンのビットの下で、英語の翻訳は、ライフサイクルから来たのか分かりません。私が手に持っていた場合は、フロントエンドの開業医として、それは結局、など「サイクルをレンダリングする」ために取るかもしれない、と職業を扱うブラウザは、ブラウザのレイアウトは、スケルトンで、DOMツリーを作り、ページ全体の光を描きます。
メモリツリー内の白い建物オブジェクトのネストされた階層React.createElement法により作成されたすべてのコンポーネントを反応させ、ブラウザにレンダリングする準じは、DOMツリーになっページをレンダリングするとき、今回のノードが真でありますあなたができる唯一の時間が本当にオブジェクトやブラウザ環境内の方法および相互作用のために、重要になり、同時に休暇もフック関数ので、それは機能のライフサイクルと言うことができる、干渉を防ぐために、リスナーとその論理的なフォローアップをクリーンアップする必要があります存在の意味があります。
コードの最初に：
<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<メタ文字コード= "UTF-8" />
<メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1.0" / >
<META HTTP-当量= "X-UA-互換性のある"コンテンツ= "IE =エッジ" />
<タイトル>ドキュメント</ TITLE>
<スクリプトcrossorigin SRC = "https://unpkg.com/react@16/umd /react.production.min.js "> </ SCRIPT>
<スクリプトcrossorigin SRC =" https://unpkg.com/react-dom@16/umd/react-dom.production.min.js "> </スクリプト>
<スクリプトSRC = "https://unpkg.com/@babel/standalone/babel.min.js"> </ SCRIPT>
</ HEAD>
<BODY>
<DIV ID = "アプリケーション"> </ div>
<DIV ID = "空洞"> </ div>
<スクリプトタイプ= "テキスト/バベル">
CONST {コンポーネント、フラグメント}= 反応させ;
クラスFは、コンポーネント{延びている
状態が = {X： '前の状態を' };
静的getDerivedStateFromProps（getProps、getStateを）{
にconsole.log（ 'F得る小道具' 、{getProps、getStateを}）。
}
componentDidMount（）{
にconsole.log（ 'Fマウントました' ）;
setTimeout（（） => {
にconsole.log（ '％Cは％s'は、 '色：青'、 '状態を更新するために開始' ）;
この .setState（{X： '後の状態' }）;
}、 2000 ） ;
}
shouldComponentUpdate（nextProps、nextState）{
にconsole.log（ 'Fは、更新する必要' 、{nextProps、nextState}）。
返す 真;
}
componentDidUpdate（prevProps、prevState）{
にconsole.log（ 'Fた更新' 、{prevProps、prevState}）。
}
componentWillUnmount（）{
にconsole.log（ 'Fがアンマウントされます' 、Date.now（））。
}
レンダリング（）{
リターン（
<div>
{ この.props.x}
{ この.state.x}
</ DIV>
）;
}
}
クラスのアプリケーションは、コンポーネント{延びている
状態 = {Xを「前小道具」}。
{componentDidMount（）
はconsole.log（ 'アプリケーションが実装しました' ）;
setTimeout（（） => {
にconsole.log（ '％のC％S'、 '色：赤'、 '小道具を更新するために開始' ）;
この .setState（{X： '後小道具' }）;
}、 2000 ） ;
}
componentWillUnmount（）{
にconsole.log（ 'アプリがアンマウントされます' 、Date.now（））。
レンダリング（）{
リターン <F {... この .state} />。
}
}
のsetTimeout（（） => {
ReactDOM.render（ 'アンマウントコンポーネントアプリで' + Date.now（）、APP）;
}、 6000 ）。
ReactDOM.render（ <アプリケーション/>、アプリ）;
</スクリプト>
</ BODY>
</ HTML>
小道具および関連状態
アプリの親コンポーネントは、サブアセンブリF内、自分の国に導入される無視ライフサイクル機能を引用し、マウントとアンマウント：
1、getDerivedStateFromProps -
印刷結果は、それがコンポーネントの初期化、更新、または新しい状態または小道具を継承しているかどうかを、見ることができ、最初のトリガは、ブラウザを介して静的フック関数getDerivedStateFromPropsあります。
2、shouldComponentUpdate -
古いものと新しい状態を収集し、比較を開始するSETSTATE非同期割り当て状態の次の状態、全体のサブアセンブリFの後、新しい状態は、ライフサイクル機能shouldComponentUpdateを締結し、リターンの記載された値は、truthyまたはfalsyで更新を続行するか中断するかを選択できます更新;
3、componentDidUpdate -
shouldComponentUpdateが正常に次のステップを入力した後、我々はrenderメソッドを実行します、仮想DOMツリーを更新し、ブラウザがレンダリングを終了した古い状態componentDidUpdateがパラメータとして渡された後、あなたは新しい状態を比較することができ、古い状態が保持されます。
マウントとアンマウント
componentDidMount和componentWillUnmount -
彼の息子は、コンポーネントのライフサイクルが機能を搭載観察すると、マウントが、フックアセンブリが最初にトリガされたマウント見つけることができます;アンインストール、トリガサブアセンブリの後にフックをアンインストールします。
フックマウントするため、一般的には、上からサブアセンブリなければならないため、頻繁な操作の断片上に搭載され、その後、全体のツリーは、DOMを実装するために、DOMツリーだけでなく、性能に影響を与え、さらにはユーザエクスペリエンスに影響を与える可能性があります。
しかし、現実にはあり、我々は、多くの場合、この時間は、実際には、すべてのフックがトリガされた実際のDOMツリーに取り付けられた親コンポーネントに取り付けられていることを意味ページと対話できることを示し、登録されたリスナー関数に取り付けられた理由しかし、今度ははっきりそれを置く、componentDidMount実際に非同期フック、親コンポーネントがcomponentDidmountサブアセンブリをマウントし、最終的には独自のマウントフックをトリガーした後にトリガされます。
最初に除去された親ノードをアンロードするとき逆に、次にフックアセンブリをアン底トリガーへ戻ります。
しかし、我々は多くの場合、実際にそれがDOMツリーから剥離し、ターントリガーに試されていない場合、独自のアンインストールフックをトリガするために、アンロードする前に、親コンポーネントのDOMツリーからトリガcomponentWillUnmountを示す、アンロードフックリスナーにアンロードすべてのサブコンポーネントは、フックをアンインストールするために、そして最終的に、親コンポーネントは、DOMツリーからアン実際に完了すること。