ReactJS: `setState` は常に完全な再レンダリングをトリガーしますか?

ReactJS: "setState" が呼び出されるたびに "render" がトリガーされますか?

React は、以下の場合にのみコンポーネントを効率的に再レン​​ダリングするように設計されています。必要。ただし、この動作は常に明らかであるとは限らず、「setState」とレンダリングの関係について疑問が生じます。

デフォルトのレンダリング動作

デフォルトでは、「setState」を呼び出します。 " は、コンポーネントとそのすべての子コンポーネントの完全な再レンダリングをトリガーします。これにより、状態への変更が UI に正確に反映されるようになります。

この動作は、デフォルトで常に true を返す「 shouldComponentUpdate 」の結果です。このメソッドは、props または state への変更に基づいてコンポーネントがレンダリング出力を更新するかどうかを決定します。

Render の目的

毎回 "render" が呼び出されても、" setState" が呼び出されても、React はすぐには DOM を更新しません。代わりに、UI の望ましい状態を表す仮想 DOM が生成されます。実際の DOM は、古い仮想 DOM と新しい仮想 DOM の間に変更があった場合にのみ変更されます。

例

質問に示されているコード スニペットを考えてみましょう:

this.setState({'test':'me'});

最初のクリック後に状態が変化していないにもかかわらず、親コンポーネントと子コンポーネントの両方が再レンダリングされます。これは、「 shouldComponentUpdate 」が常に true を返し、再レンダリングが強制されるためです。

再レンダリングの最適化

不要な再レンダリングを防ぐために、「 shouldComponentUpdate 」をオーバーライドできます。 " そして、新しいプロパティと状態を以前の値と比較します。 UI に影響を与える重大な変更がない場合は、false を返してレンダリングを防ぐことができます。

ロジックが複雑すぎる場合や不必要な比較を実行する場合、「 shouldComponentUpdate 」を使いすぎるとパフォーマンスの問題が発生する可能性があることに注意してください。

以上がReactJS: `setState` は常に完全な再レンダリングをトリガーしますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。