Reactライフサイクル原理と使い方はメモを踏みます。

この実例はReactライフサイクルの原理と使い方を述べている。皆さんに参考にしてあげます。具体的には以下の通りです。
ライフサイクル
ライフサイクルの概要
ライフサイクルの状態
コンポーネントのライフサイクルは三つの状態に分けることができます。

Mounting：実際のDOM

を挿入しました。

Updating：再陰影されています。

Unimounting：実際のDOM

に移動しました。

componentWillMountはレンダリングの前に呼び出し、クライアントでもサービスしています。

ライフサイクル紹介
component DidMount：
最初のレンダリングの後、クライアントだけで呼び出します。その後、コンポーネントは対応するDOM構造を生成し、this.getDOM Node()によってアクセスすることができる。他のJavaScriptフレームと一緒に使用したいなら、この方法でsetTimeout、set Interval、またはAJAX要求などの操作を呼び出すことができます。
componentWillceive Props
コンポーネントが新しいプロップを受信したときに呼び出しられます。この方法はrenderを初期化する際には呼び出されない。
ショルドComponentUpdate
ブール値を返します。コンポーネントが新しいpropsまたはstateを受信すると呼び出しられます。初期化時やforceUpdateを使用する場合は呼び出しられません。
コンポーネントの更新が必要でないことを確認した時に使うことができます。
component WillUpdate
コンポーネントが新しいpropsまたはstateを受信したが、renderがまだないときに呼び出される。初期化時には呼び出されません。
component DidUpdate
コンポーネントの更新が完了したらすぐに呼び出します。初期化時には呼び出されません。
componentWillUnmount
コンポーネントがDOMから取り除かれる前にすぐに呼び出しられます。
コードの概要

class Content extends React.Component {
 componentWillMount() {
   console.log('Component WILL MOUNT!')
 }
 componentDidMount() {
    console.log('Component DID MOUNT!')
 }
 componentWillReceiveProps(newProps) {
    console.log('Component WILL RECEIVE PROPS!')
 }
 shouldComponentUpdate(newProps, newState) {
    return true;
 }
 componentWillUpdate(nextProps, nextState) {
    console.log('Component WILL UPDATE!');
 }
 componentDidUpdate(prevProps, prevState) {
    console.log('Component DID UPDATE!')
 }
 componentWillUnmount() {
     console.log('Component WILL UNMOUNT!')
 }
 

React 6.3ライフサイクル
インストール
コンポーネントの例を作成し、DOMに挿入すると、これらの方法は以下の順序で呼び出される。
constructor（）
Reactコンポーネントの構造関数はインストール前に呼び出される。React.Componentサブクラスのコンストラクタを実現するには、super（props）は他の任意の文の前に呼び出すべきです。そうでなければ、this.propsはコンストラクションにおいて定義されなくなり、これはエラーを引き起こす可能性があります。
一般に，Reactでは，構造関数は二つの目的にのみ使用される。
ローカル状態this.stateは、オブジェクトを割り当てることによって初期化される。
イベントハンドラ方法を例に結びつける。
ターミナルに電話するべきではないです。逆に、あなたのコンポーネントがローカル状態を使用する必要がある場合は、構造関数に直接初期状態this.stateを指定してください。
コンストラクタはhis.stateに直接割り当てられた唯一の位置です。他のすべての方法では、this.set State()が必要です。
static get DerivedStteFroomProps（）
get DerivedStation FroomPropsは、レンダーメソッドを呼び出す前に呼び出し、初期インストールまたは後続の更新に関わらず。更新された状態のオブジェクトを返すか、nullを返して、状態を更新しないようにします。
レンダー
レンダー（）方法はクラスのコンポーネントの中で唯一必要な方法です。
呼び出し時、それはthis.propsを確認して、this.stateは次のタイプの一つに戻ります。

React element。通常はJSXで作成されます。

Arays and fragments。レンダリングから複数の要素を返します。詳細については、セグメントドキュメントを参照してください。

Portalsです。

文字列と数字。これらはDOMでテキストノードとして提示される。

ブルまたはnullです。何もありません

エンデ()関数は無状態であるべきで、これはコンポーネント状態を変更しないことを意味し、呼び出しごとに同じ結果を返し、ブラウザと直接対話しない。
ブラウザとの対話が必要な場合は、component DidMount（）または他のライフサイクルを実行してください。レンダー（）の純粋さを維持することで、コンポーネントをより考えやすくします。
shuldComponentUpdate（）がfalseに戻るとレンダーは呼び出されません。
component DidMount()

component DidMount（）は、コンポーネント（ツリーに挿入）をインストールした後、直ちに呼び出します。DOMノードの初期化が必要です。ここに置くべきです。リモートポイントからデータをロードする必要があるなら、これはネットワーク要求を実装するための良いところです。

この方法は任意の購読の良いところを設定します。このようにすれば、componentWillUnmountの購読をキャンセルすることを忘れないでください。

は、すぐにcomponent DidMount（）でthis.set State（）を使用できます。これは追加のレンダリングをトリガしますが、ブラウザが画面を更新する前に発生します。これは、たとえrender（）がこの場合に2回呼び出しられても、ユーザは中間状態を見ないことを保証する。このモードを慎重に使用してください。通常は性能に問題がありますので。ほとんどの場合、初期状態のコントローラを割り当てることができるはずです。しかし、DOMノードのサイズや位置に依存するものをレンダリングする前に測定する必要がある場合は、モダリティやツールチップなどを処理する必要があります。

これらの方法はレガシーと考えられています。新しいコードでそれらを避けるべきです。
UNSAFE_component WillMount（）
更新
props or stateの変更は更新の原因になります。コンポーネントを再レンダリングするときは、以下の順序でこれらの方法を呼び出します。
static get DerivedStteFroomProps（）
レンダー
get Snapshot BeforeUpdate()
get Snapshot BeforeUpdate（prevProps，prevState）
getSnapshotBeforeUpdate（）は、最近提示された出力が、例えばDOMに提出される前に呼び出される。これは、コンポーネントが変更される可能性がある前に、DOMからいくつかの情報（例えば、ローリング位置）を獲得することを可能にする。このライフサイクルの戻り値は、component DidUpdate()にパラメータとして渡されます。
このような用例は一般的ではないが、ローリング位置を特定の方法で処理する必要があるチャットスレッドなどのUIに登場する可能性がある。
公式サイトの例

class ScrollingList extends React.Component {
 constructor(props) {
  super(props);
  this.listRef = React.createRef();
 }

 getSnapshotBeforeUpdate(prevProps, prevState) {
  // Are we adding new items to the list?
  // Capture the scroll position so we can adjust scroll later.
  if (prevProps.list.length < this.props.list.length) {
   const list = this.listRef.current;
   return list.scrollHeight - list.scrollTop;
  }
  return null;
 }

 componentDidUpdate(prevProps, prevState, snapshot) {
  // If we have a snapshot value, we've just added new items.
  // Adjust scroll so these new items don't push the old ones out of view.
  // (snapshot here is the value returned from getSnapshotBeforeUpdate)
  if (snapshot !== null) {
   const list = this.listRef.current;
   list.scrollTop = list.scrollHeight - snapshot;
  }
 }

 render() {
  return (
   <div ref={this.listRef}>{/* ...contents... */}</div>
  );
 }
}

component DidUpdate()
component DidUpdate（）の更新が発生したらすぐに呼び出します。初期レンダリングはこの方法を起動しません。
これをコンポーネント更新時にDOMを操作する機会とする。現在のアイテムを前のアイテムと比較すると（例えば、アイテムが変更されていない場合は、ネットワーク要求は不要かもしれません）、これもネットワーク要求を行うための良い場所です。

componentDidUpdate(prevProps) {
 // Typical usage (don't forget to compare props):
 if (this.props.userID !== prevProps.userID) {
  this.fetchData(this.props.userID);
 }
}

component DidUpdate（）しかし、上の例のように1つの条件で包まれなければならないので、無限ループが発生します。これはまた、ユーザーが見えないが、コンポーネントの性能に影響を与える追加の再レンダリングをもたらす。
component DidUpdate（）：shuldComponentUpdate（）がfalseに戻ると、呼び出されません。
これらの方法はレガシーと考えられています。新しいコードでそれらを避けるべきです。
UNSAFE_component WillUpdate()
UNSAFE_componentWillceive Props（）
アンマウント
DOMからコンポーネントを削除するときにこの方法を呼び出します。
component WillUnmount()
componentWillUnmount（）は、コンポーネントをアンインストールし、廃棄する前に直ちに呼び出します。この方法では、タイマを無効にしたり、ネットワーク要求をキャンセルしたり、作成した任意の購読componentDidMountをクリアしたりするなど、必要な清掃を行う。
set State（）を呼び出すべきではなく、componentWillUnmount（）はコンポーネントが永遠に再現されないからです。コンポーネントのインスタンスをアンインストールした後は、永遠に再インストールされません。
エラー処理
レンダリング中にライフサイクル方法またはサブアセンブリの構造関数にエラーが発生した場合、これらの方法を呼び出します。
static get DerivedStation Frome()
static get DerivedStation Frome(error)
次のコンポーネントにエラーが発生したらライフサイクルを呼び出します。パラメータとして投げられたエラーを受信し、値を返してステータスを更新します。
component DidCatch()
component DidCatch（error，info）
次のコンポーネントにエラーが発生したらライフサイクルを呼び出します。二つのパラメータを受信します。
error-投げたエラー。
info-componentStarkは、どのコンポーネントがエラーを引き起こすかに関する情報を含むキーのオブジェクトを含む。
エラーが発生したら、component DidCatch（）はUI setStateをレンダリングするように呼び出すことにより、将来のバージョンでは使用を推奨しない。static get DerivedStation Froom（）を使って処理をキャンセルし、レンダリングではありません。
component DidCatch()は「提出」段階で呼び出され、副作用が認められます。エラーなどの記録に使うべきです。

class ErrorBoundary extends React.Component {
 constructor(props) {
  super(props);
  this.state = { hasError: false };
 }

 static getDerivedStateFromError(error) {
  // Update state so the next render will show the fallback UI.
  return { hasError: true };
 }

 componentDidCatch(error, info) {
  // Example "componentStack":
  //  in ComponentThatThrows (created by App)
  //  in ErrorBoundary (created by App)
  //  in div (created by App)
  //  in App
  logComponentStackToMyService(info.componentStack);
 }

 render() {
  if (this.state.hasError) {
   // You can render any custom fallback UI
   return <h1>Something went wrong.</h1>;
  }
  return this.props.children; 
 }
}

本論文で述べたように、皆さんのreactプログラムの設計に役に立ちます。