React アプリが 2 回レンダリングされるのはなぜですか: Strict モードの影響を理解して対処する?

Strict モードによる React での二重レンダリングの解決

React では、二重レンダリングに遭遇すると困惑することがあります。調査すると、この動作の原因となっているコードが見つかる可能性があります:

if ( workInProgress.mode & StrictMode) {
        instance.render();
      }

Strict Mode とは何ですか?

StrictMode は、React で利用できる貴重なデバッグ ツールです。これは、コードの問題を特定し、潜在的な実行時エラーを軽減するための警告を提供するのに役立ちます。これは、開発段階で微妙な問題を発見するための強力な機能です。

デュアル レンダリング

StrictMode は、デバッグには有益ですが、追加のレンダリング サイクルが付属しています。これは、マウントおよび更新フェーズ中に構造の変更をチェックすることでコンポーネントの安定性を高めるという役割によるものです。

ストリクト モードを無効にする

アプリが無効になっていることを確認した場合は、 Strict モードの厳密な検査が必要な場合は、これを無効にすることを選択できます。デフォルトで有効になっているテンプレートまたはフレームワークから Strict モードを継承している可能性があります。

Strict モードの検索

React アプリのルート (通常はインデックス内) を見つけます。 js.囲んでいる を確認します。メイン アプリケーション コンポーネントの周囲のタグ:

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

Strict モードの削除

Strict モードを無効にするには、 を削除するだけです。ラッパー:

ReactDOM.render(
  {app},
  document.getElementById('root')
);

結論

Strict モードでは、React は強力なデバッグ メカニズムを提供しますが、二重レンダリングのコストが伴います。 Strict Mode の目的とそれを無効にするオプションを理解することで、開発者は開発環境を調整し、それに応じて React アプリケーションを最適化できるようになります。

以上がReact アプリが 2 回レンダリングされるのはなぜですか: Strict モードの影響を理解して対処する?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。