ホームページ >ウェブフロントエンド >jsチュートリアル >React は `setState()` 呼び出しのたびにコンポーネントを再レンダリングしますか?

React は `setState()` 呼び出しのたびにコンポーネントを再レンダリングしますか?

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-11-29 00:20:11561ブラウズ

Does React Re-render Components After Every `setState()` Call?

ReactJS: "setState" 呼び出し後の React レンダリング

クエリ: "setState" による React の再レンダリング

React はすべてのコンポーネントを再レンダリングしますか「setState()」が有効な場合は、そのサブコンポーネントとそのサブコンポーネント呼び出されていますか?

説明:

はい、React は「setState()」が呼び出された後、デフォルトで再レンダリングをトリガーします。

デフォルトの動作の理由:

React はレンダリングの最適化を目的としていますが、常に再実行することで状態の突然変異によって引き起こされる微妙なバグを防ぎます。状態が変化したときの「render」メソッド。

ShouldComponentUpdate メソッド:

各コンポーネントには、「ShouldComponentUpdate(nextProps, nextState)」というメソッドがあります。このメソッドは、props と state への変更に基づいて「render」を再実行するかどうかを決定します。

ShouldComponentUpdate のデフォルト実装:

デフォルトでは、「ShouldComponentUpdate」は true を返し、再レンダリングが確実に行われます。状態またはプロパティが変更されるたびに。

例:

提供されたコード内スニペットでは、Main コンポーネントはテキストがクリックされるたびにその状態を同じ値 (「me」) に設定します。状態が変化しなくても、「 shouldComponentUpdate 」がデフォルトで true を返すため、React は Main コンポーネントと TimeInChild コンポーネントの両方を再レンダリングします。

カスタム ShouldComponentUpdate 実装:

次の方法でレンダリングを最適化できます。新旧のプロパティと状態を比較して実際の再レンダリングが適切かどうかを判断する「 shouldComponentUpdate 」のカスタム実装を作成します。必要です。

以上がReact は `setState()` 呼び出しのたびにコンポーネントを再レンダリングしますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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