すべての「setState」呼び出しは React レンダリングをトリガーしますか?

ReactJS - 「setState」呼び出しごとにレンダリングがトリガーされますか?

React は、仮想 DOM とネイティブ DOM の区別を維持します。コンポーネントが状態の更新を受け取ると、その render メソッドが呼び出されます。これにより、コンポーネントの新しい仮想 DOM 表現が生成されます。ただし、React はネイティブ DOM をすぐに更新しないことに注意することが重要です。

デフォルトの動作: 状態が更新されるたびに再レンダリング

デフォルトでは、React は次のように仮定します。状態が変化すると UI の再レンダリングが必要になります。これにより、ユーザー インターフェイスが常に最新の状態と同期されることが保証されます。

仮想 DOM レンダリングとネイティブ DOM レンダリング

レンダリングが実行されると、新しい DOM レンダリングが生成されます。仮想DOM。このフェーズはネイティブ DOM には影響しません。その後、React は新しい仮想 DOM を以前の仮想 DOM と比較し、変更されたブラウザ内の実際の要素のみを更新します。この最適化により、不必要な再レンダリングが防止され、ブラウザのリフローと再描画が最小限に抑えられます。

再レンダリングを最適化できますか?

微調整するには shouldComponentUpdate ライフサイクル メソッドを実装できます。コンポーネントが再レンダリングされるとき。 2 つの引数を取ります:

• nextProps: コンポーネントが受け取る次の props セット
• nextState: コンポーネントの次の状態

shouldComponentUpdate を使用して、今後の props と state が現在のものと大きく異なるかどうかを確認します。そうでない場合は、false を返して再レンダリングを防止し、パフォーマンスを向上させることができます。

例

この例では、親コンポーネントと子コンポーネントの両方が再レンダリングされます。親コンポーネントの状態が変化しない場合でも、クリックするたびに実行されます。これは、setState が常に仮想 DOM の再レンダリングをトリガーし、React が UI を更新する必要があると想定しているためです。このようなシナリオで不必要な再レンダリングを防ぐために、 shouldComponentUpdate を実装して、状態が実際に変更されたかどうかを確認できます。

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