React コンポーネントが 2 回レンダリングされるのはなぜですか?それを修正するにはどうすればよいですか?

React コンポーネントでの二重レンダリングの根本原因を理解する

React 開発環境では、コンポーネントの二重レンダリングは、厳密モードユーティリティ。 Strict Mode が有効な場合、React は 2 番目のレンダー パスを実行してエラー検出を強化し、開発者にコード内の潜在的な問題を警告します。

Strict モードの理由

StrictMode は機能します。特に開発中に、コードの不規則性を特定してフラグを立てるための貴重なツールとして機能します。意図的に追加のレンダー パスを導入することで、React がコンポーネントの動作を細心の注意を払って検査し、役立つ警告を提供できるようになります。

Strict モードの無効化

Strict モードには大きな利点がありますが、運用環境では必ずしも必要というわけではありません。 Strict Mode を無効にするには、 を削除するだけです。コンポーネントツリーからのタグ。たとえば、アプリ コンポーネントが現在 でラップされている場合、コードを次のように変更できます:

  ReactDOM.render(
    {app} // Remove the <React.StrictMode> tag
    document.getElementById('root')
  );

この変更により Strict モードがオフになり、製品バージョンでの二重レンダリングが排除されます。アプリケーションの

以上がReact コンポーネントが 2 回レンダリングされるのはなぜですか?それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。