Reactコンポーネントは、アプリケーションライフサイクルのさまざまな段階を経ていますが、舞臺裏で起こることは明らかではないかもしれません。

これらの段階には次のものが含まれます。

• マウント
• 更新します
• アンインストール
• エラー処理

各段階には、コンポーネントで特定のアクションを?qū)g行できる対応する方法があります。たとえば、ネットワークからデータを取得するときは、 componentDidMount()メソッド（マウントフェーズで使用可能）でAPI呼び出しを処理する関數(shù)を呼び出すことをお勧めします。

さまざまなライフサイクルアプローチを理解することは、他の操作と混同されることなく、必要に応じて操作を正確にトリガーすることができるため、Reactアプリケーションの開発には重要です。この記事では、利用可能な方法や使用するシナリオの種類を含む各ライフサイクルについて説明します。

取り付けフェーズ

マウントをコンポーネントライフサイクルの初期段階と考えてください。マウントが発生する前にコンポーネントは存在しませんでした - マウントが発生し、ドキュメントの一部として接続するまでDOMを介して點(diǎn)滅しました。

コンポーネントがマウントされたら、 constructor() 、 render() 、 componentDidMount() 、およびstatic getDerivedStateFromProps()の多くの方法を利用できます。各方法には獨(dú)自の目的があります。順番に見てみましょう。

コンストラクタ（）

constructor()メソッドは、メソッドを結(jié)合するためにコンポーネントに狀態(tài)を直接設(shè)定する場合に必要です。このように見えます：

 //入力コンポーネントが取り付けを開始したら...
コンストラクター（小道具）{
  // ...いくつかの小道具を設(shè)定してください...
  スーパー（小道具）;
  // ...この場合、それは空白のユーザー名です...
  this.state = {
    ユーザー名： ''
  };
  // ...次に、入力を処理するメソッドをバインドします。これを変更します。HandleInputChange= this.handleinputChange.bind（this）;
}

コンポーネントを作成するときに、 constructor最初の方法であることを知ることが重要です。コンポーネントはレンダリングされていません（近日公開）ですが、DOMはすでにそれを知っているので、レンダリングする前にそれを引っ掛けることができます。したがって、コンポーネントがまだビルドフェーズにあるため、これはsetState()を呼び出したり、副作用を?qū)毪筏郡辘工雸鏊扦悉ⅳ辘蓼护蟆?/p>

以前に參照に関するチュートリアルを書きましたが、私が気づいたことの1つは、 React.createRef()を使用すると、 constructorでREFを設(shè)定できることです。これは合理的です。なぜなら、REFはプロップなしで値を変更するために使用されるか、更新された値でコンポーネントを再レンダリングする必要があるためです。

コンストラクター（小道具）{
  スーパー（小道具）;
  this.state = {
    ユーザー名： ''
  };
  this.inputText = React.createref（）;
}

與える（）

render()メソッドは、コンポーネントのマークがフロントエンドに表示される場所です。ユーザーはこの時(shí)點(diǎn)でそれを見てアクセスできます。 Reactコンポーネントを作成したことがある場合は、出力タグが必要であるため、気付いていなくても、すでに精通しています。

クラスアプリはReact.comPonentを拡張します{
  //マウントプロセス中に、次のコンテンツをレンダリングしてください！
  與える（） {
    戻る （
      <div>
        <p>「こんにちは世界」</p>
      </div>
    ））
  }
}

しかし、それはrender()の全體的な目的ではありません！また、コンポーネント配列をレンダリングするためにも使用できます。

クラスアプリはReact.comPonentを拡張します{
  與える （） {
    戻る [
      <h2>JavaScriptツール</h2>、
      <frontend></frontend>、
      <backend></backend>
    ]
  }
}

コンポーネントフラグメントでさえ：

クラスアプリはReact.comPonentを拡張します{
  與える（） {
    戻る （
      <react.fragment><p>「こんにちは世界」</p></react.fragment>
    ））
  }
}

また、それを使用して、DOM階層の外側(cè)のコンポーネントをレンダリングすることもできます（React Portalと同様）：

 //コンポーネントがクラスポータルを移動できるようにするポータルを作成していますruce.component {
  //最初に、div要素constructor（）を作成します{
    素晴らしい（）;
    this.el = document.createelement（ "div"）;
  }

  //マウントの後、コンポーネントcomponentdidmount =（）=> {の子要素を追加しましょう。
    portalroot.appendChild（this.el）;
  };

  //コンポーネントがDOMから削除されている場合、その子要素componentwillunmount =（）=> {を削除します。
    portalroot.removechild（this.el）;
  };

  //ああ、これでコンポーネントをレンダリングでき、その子要素は必要に応じて（）render（）をレンダリングできます{
    const {children} = this.props;
    return reactdom.createportal（子供、this.el）;
  }
}

もちろん、 render()數(shù)字と文字列をレンダリングできます...

クラスアプリはReact.comPonentを拡張します{
  與える （） {
    「ハローワールド！」を返します
  }
}

およびnullまたはboolean値：

クラスアプリはReact.comPonentを拡張します{
  與える （） {
    nullを返します
  }
}

componentDidMount（）

名前componentDidMount()その意味を示していますか？この方法は、コンポーネントがマウントされた後に呼び出されます（つまり、DOMに接続されています）。別のチュートリアルでは、Reactのデータを取得することについて書いたもので、これがデータを取得するためにAPIにリクエストを行いたい場所です。

フェッチ方法を使用できます。

 fetchusers（）{
  fetch（ `https：// jsonplaceholder.typicode.com/users`）
    .then（response => respons.json（））
    .then（data =>
      this.setState（{
        ユーザー：データ、
        アスロード：FALSE、
      }）
    ））
  .catch（error => this.setState（{error、isloading：false}））;
}

次に、 componentDidMount() hookでメソッドを呼び出します。

 componentDidMount（）{
  this.fetchusers（）;
}

イベントリスナーを追加することもできます。

 componentDidMount（）{
  el.addeventlistener（）
}

非常に簡潔ですよね？

static getDerivedStateFromProps（）

これは少し冗長な名前ですが、 static getDerivedStateFromProps()見た目ほど複雑ではありません。マウントフェーズのrender()メソッドの前と更新フェーズの前に呼び出されます。コンポーネントのステータスを更新するためにオブジェクトを返し、更新するコンテンツがない場合はnull 。

それがどのように機(jī)能するかを理解するために、カウンター狀態(tài)に特定の値を設(shè)定するカウンターコンポーネントを?qū)g裝しましょう。このステータスは、 maxCountの値が高い場合にのみ更新されます。 maxCount親コンポーネントから渡されます。

これは親コンポーネントです。

クラスアプリはReact.comPonentを拡張します{
  コンストラクター（小道具）{
    スーパー（小道具）

    this.textinput = React.createref（）;
    this.state = {
      値：0
    }
  }

  handleIncrement = e => {
    E.PreventDefault（）;
    this.setState（{value：this.state.value 1}）
  };

  handledecrement = e => {
    E.PreventDefault（）;
    this.setState（{value：this.state.value -1}）
  };

  與える（） {
    戻る （
      <react.fragment><p>Max count：{this.state.value}</p>
           
           - 
        <counter maxcount="{this.state.value}"></counter></react.fragment>
    ））
  }
}

maxCountの値を増やすボタンがあり、それをCounterコンポーネントに渡します。

クラスカウンターはReact.comPonentを拡張します{
  state = {
    カウンター：5
  }

  static getDerivedStateFromProps（nextProps、prevstate）{
    if（prevstate.counter <nextprops.maxcount return null>
        <p>count：{this.state.counter}</p>

      
    ））
  }
}</nextprops.maxcount>

Counterコンポーネントでは、 counterがmaxCountよりも小さいかどうかを確認(rèn)します。その場合、 maxCountの価値にcounterします。そうでなければ、私たちは何もしません。

更新フェーズ

コンポーネントの小道具または狀態(tài)が変更されたときに、更新フェーズが発生します。マウントと同様に、アップデートには、次に紹介する獨(dú)自の利用可能な方法もあります。つまり、 render()とgetDerivedStateFromProps()もこの段階で発砲することは注目に値します。

shouldcomponentupdate（）

コンポーネントの狀態(tài)または小道具が変更された場合、 shouldComponentUpdate()メソッドを使用して、コンポーネントを更新する必要があるかどうかを制御できます。この方法は、レンダリングが発生する前に呼び出され、狀態(tài)と小道具を受け取ったときに呼び出されます。デフォルトの動作はtrueです。州や小道具が変更されるたびに再レンダリングするために、これを行います。

 shouldcomponentUpdate（nextprops、nextstate）{
  this.state.value！== nextstate.value;
}

falseが返されると、コンポーネントは更新されませんが、代わりにrender()メソッドを呼び出してコンポーネントを表示します。

getsnaphotbeforeupdate（）

私たちにできることの1つは、ある時(shí)點(diǎn)でコンポーネントの狀態(tài)をgetSnapshotBeforeUpdate()することです。 render()の後に呼ばれますが、DOMに新しい変更を犯す前に呼び出されます。戻り値は、 componentDidUpdate()に3番目のパラメーターとして渡されます。

以前の狀態(tài)と小道具をパラメーターとして受け取ります。

 getsnapshotbeforeupdate（prevprops、prevstate）{
  // ...
}

私の意見では、このアプローチのユースケースはほとんどありません。これは、頻繁に使用できないライフサイクル方法です。

componentDidupdate（）

componentDidUpdate()をメソッドリストに追加します。この名前は大まかにすべてを示しています。コンポーネントが更新されている場合は、このメソッドを使用してこの時(shí)點(diǎn)でフックし、コンポーネントの以前の小道具と狀態(tài)に渡すことができます。

 componentDidupdate（prevprops、prevstate）{
  if（prevstate.counter！== this.state.counter）{
    // ...
  }
}

getSnapshotBeforeUpdate()を使用したことがある場合は、parameterとしてcomponentDidUpdate()に戻り値を渡すこともできます。

 componentDidupdate（prevprops、prevstate、snapshot）{
  if（prevstate.counter！== this.state.counter）{
    // ....
  }
}

アンインストールフェーズ

ここでは、マウントフェーズの反対がほとんど見えます。ご想像のとおり、コンポーネントがDOMからクリアされ、使用できなくなったときにアンインストールが発生します。

ここには1つの方法しかありません： componentWillUnmount()

これは、コンポーネントがアンインストールされて破壊される前に呼び出されます。これはcomponentDidMount()に追加される可能性のあるイベントリスナーの削除やサブスクリプションのクリアなど、コンポーネントが去った後に必要なクリーンアップを?qū)g行したい場所です。

 //イベントリスナーcomponentwillunmount（）を削除する{
  el.RemoveEventListener（）
}

エラー処理フェーズ

コンポーネントに問題がある可能性があり、エラーを引き起こす可能性があります。この問題を解決するために、しばらくエラー境界を使用しています。このエラー境界コンポーネントは、いくつかの方法を使用して、可能なエラーに対処するのに役立ちます。

getDerivedStateFromError（）

getDerivedStateFromError()を使用して、子コンポーネントからスローされたエラーをキャッチし、コンポーネントの狀態(tài)を更新するために使用します。

 class errorboundaryはreact.componentを拡張します{

  コンストラクター（小道具）{
    スーパー（小道具）;
    this.state = {
      Haserror：false
    };
  }

  static getDerivedStateFromError（エラー）{
    return {haserror：true};
  }

  與える（） {
    if（this.state.haserror）{
      戻る （
        <h1>おっと、何かがうまくいかなかった:(</h1>
      ）;
    }

    this.props.childrenを返します。
  }
}

この例では、子コンポーネントからエラーがスローされると、 ErrorBoundaryコンポーネントに「ああ、いくつかの問題が発生した」が表示されます。

componentDidCatch（）

getDerivedStateFromError()は、エラーログなどの副作用が発生した場合にコンポーネントの狀態(tài)を更新するのに適していますが、 componentDidCatch()を使用する必要があります。

 componentDidCatch（エラー、情報(bào)）{
  //サービスへのログエラー}

getDerivedStateFromError()とcomponentDidCatch()の両方は、 ErrorBoundaryコンポーネントで使用できます。

 class errorboundaryはreact.componentを拡張します{

  コンストラクター（小道具）{
    スーパー（小道具）;
    this.state = {
      Haserror：false
    };
  }

  static getDerivedStateFromError（エラー）{
    return {haserror：true};
  }

  componentDidCatch（エラー、情報(bào)）{
    //サービスへのログエラー}

  與える（） {
    if（this.state.haserror）{
      戻る （
        <h1>おっと、何かがうまくいかなかった:(</h1>
      ）;
    }

    this.props.childrenを返します。
  }
}

これがReactコンポーネントのライフサイクルです！

ReactコンポーネントがDOMとどのように相互作用するかを理解するのはクールなことです。 「魔法」が起こると考えるのは簡単で、ページに何かが表示されます。しかし、Reactコンポーネントのライフサイクルは、この狂気が整然としていることを示しており、コンポーネントがDOMに到達(dá)してから消えるまでに何が起こるかを多くのコントロールを提供することを目指しています。

私たちは比較的短いスペースで多くのことをカバーしますが、これにより、Reactがコンポーネントをどのように処理するか、処理の各段階でどのような機(jī)能があるかについての良いアイデアが得られることを願っています。ここで紹介されたものについて明確でない場合は、お?dú)葺Xに質(zhì)問してください。私は最善を盡くして支援したいです！

以上が反応ライフサイクルの円の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。