反応ライフサイクルの円

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

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

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

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

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

取り付けフェーズ

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

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

コンストラクタ（）

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

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

コンポーネントを作成するときに、 constructor最初の方法であることを知ることが重要です。コンポーネントはレンダリングされていません（近日公開）ですが、DOMはすでにそれを知っているので、レンダリングする前にそれを引っ掛けることができます。したがって、コンポーネントがまだビルドフェーズにあるため、これはsetState()を呼び出したり、副作用を導入したりする場所ではありません。

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

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

与える（）

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

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

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

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

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

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

また、それを使用して、DOM階層の外側のコンポーネントをレンダリングすることもできます（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()数字と文字列をレンダリングできます...

クラスアプリは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 。

それがどのように機能するかを理解するために、カウンター状態に特定の値を設定するカウンターコンポーネントを実装しましょう。このステータスは、 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よりも小さいかどうかを確認します。その場合、 maxCountの価値にcounterします。そうでなければ、私たちは何もしません。

更新フェーズ

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

shouldcomponentupdate（）

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

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

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

getsnaphotbeforeupdate（）

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

以前の状態と小道具をパラメーターとして受け取ります。

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

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

componentDidupdate（）

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

 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()に追加される可能性のあるイベントリスナーの削除やサブスクリプションのクリアなど、コンポーネントが去った後に必要なクリーンアップを実行したい場所です。

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

エラー処理フェーズ

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

getDerivedStateFromError（）

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

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

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

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

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

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

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

componentDidCatch（）

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

 componentDidCatch（エラー、情報）{
  //サービスへのログエラー}

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

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

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

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

  componentDidCatch（エラー、情報）{
    //サービスへのログエラー}

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

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

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

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

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

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