反応ライフサイクルの円-CSSチュートリアル-php.cn

コンポーネントがマウントされたら、 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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。