React コンポーネントのライフサイクル機能は何ですか?

すべてのコンポーネントにはいくつかのライフサイクル機能があります。

コンポーネントのインスタンスが作成され、DOMに挿入されると、次の関数が呼び出されます

constructor
componentWillMount
render
componentDidMount

コンポーネントのstateまたはpropsを変更すると更新が発生し、コンポーネントのインスタンスが作成されたときに次のメソッドが呼び出されます再レンダリング

componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

DOMからコンポーネントが削除されると、以下のメソッドが呼び出されます

componentWillUnmount

一.render()

renderメソッドが必要で、renderの戻り値は次のタイプの
( 1) 反応 要素: カスタム コンポーネントまたはネイティブ DOM コンポーネント
(2) 文字列または数値 : は DOM のテキスト ノード
にレンダリングされます(3) ポータル: ReactDOM.createPortal 経由で作成
(4)null:何もレンダリングされません
(5)Boolean:何もレンダリングされません
(6)複数の要素を含む配列

render(){
    return [
        <li key=&#39;1&#39;>1</li>,
        <li key=&#39;2&#39;>2</li>
    ]
}

render メソッドは単純である必要があります。 render が呼び出されるたびに、コンポーネントの状態を変更することはできません。また、render ではブラウザと対話することはできません。ブラウザと対話する必要がある場合は、componentDidMount または他のライフサイクル関数で実行してください。コンポーネントのコンストラクターは、コンポーネントがロードされる前に呼び出されます。明示的なコンストラクターが定義されていない場合、コンポーネントをインスタンス化するときにデフォルトのコンストラクターが呼び出されます。コンストラクターがReact.Componentのサブクラスで明示的に定義されている場合は、コンストラクターで最初にsuperを呼び出す必要があります。 props).コンストラクターで状態をインスタンス化することは良い選択です。以下はコードの例です

constructor(props) {
  super(props);
  this.state = {
    color: props.initialColor
  };
}

react で state を初期化するために props を使用することは合法ですが、問題があります:
props が更新されると、state更新されません。解決策は、コンポーネントの componentWillReceiveProps(nextProps) 内の新しい props で state を更新することです。これで問題は解決できますが、状態を最も近いパブリック親コンポーネント

three.componentWillMount()に昇格させることはお勧めしません。読み込みが発生すると、componentWillMount が直前に呼び出され、componentWillMount は render を呼び出す前に呼び出されるため、componentWillMount の state を変更してもコンポーネントは再レンダリングされません。このメソッドはサーバー側のレンダリングのためにのみ呼び出されます。このメソッドを コンストラクターに置き換えることをお勧めします。

IV.componentDidMount()

コンポーネントがロードされると、componentDidMount が直ちにトリガーされ、この関数の state を変更すると、コンポーネントが再レンダリングされます。 DOM は、コンポーネントがロードされた後にのみ操作できます。リモート データをロードする必要がある場合は、ここでネットワーク リクエストを送信することをお勧めします

5.componentWillReceiveProps(nextProps)

転送されたコンポーネントが componentWillReceiveProps の前に新しい props を受け入れるとき。意志が発動される。 props の更新に応答するために state を更新する必要がある場合は、ここで setState メソッドを通じて state を更新できます。コンポーネントが初めて props を受け取ったとき、このメソッドは呼び出されません。 注:
props が変更されていない場合、このメソッドが呼び出される可能性があるため、現在の props を 次の props と比較する必要があります。この方法。

VI. shouldComponentUpdate(nextState,nextProps)

新しい props または state が受け入れられると、レンダリング前に shouldComponentUpdate が呼び出されます。メソッドはデフォルトで戻ります確かに、このメソッドは最初のレンダリング中や forceUpdate の使用中に呼び出されません。 shouldComponentUpdate が false を返した場合、後続の componentWillUpdate、render、および componentDidMount は呼び出されず、コンポーネントとそのサブコンポーネントは再レンダリングされません。

VII.componentWillUpdate(nextProps, nextState)

新しい

propsまたはstateを受信すると、このメソッドは再レンダリングの直前に呼び出されます。このメソッドでは this.setState() を実行できません。このメソッドは最初のレンダリングでは呼び出されません 8.componentDidUpdate(prevProps, prevState)

更新が完了すると、最初のレンダリングが行われます。このメソッドは呼び出されません。コンポーネントが更新された場合、ここで DOM を操作できます。現在の props が以前の

props と異なることがわかった場合は、ここでネットワークリクエストを送信することをお勧めします

9。 ComponentWillUnmount()

このメソッドはコンポーネントが破棄される直前に呼び出され、必要なクリーンアップをこのメソッドで実行できます

以上がReact コンポーネントのライフサイクル機能は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。