React コンポーネントが 2 回レンダリングされるのは Strict モードのせいですか?

React コンポーネントが 2 回レンダリングされる: Strict モードの問題

React アプリケーションをデバッグしていると、特定のコンポーネントが 2 回レンダリングされるシナリオに遭遇することがあります。コードを調べると、「react-dom.development.js」の

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

というスニペットが見つかります。これにより、次の疑問が生じます: この二重レンダリングは Strict モードに関係していますか?

Strict モードについて

Strict モードは、検出を目的とした React の組み込み機能です。コード内の潜在的な問題を報告します。これにより、気付かれない可能性のある一般的な間違いやパフォーマンスの問題を特定するのに役立つ追加のチェックと警告が有効になります。

ダブル レンダリングにおける Strict モードの役割

開発中、Strict はモードはデバッグ ツールとして機能し、コンポーネントを意図的に 2 回レンダリングします。この二重レンダリングは、コンポーネントのプロパティや状態が変化したときに発生する可能性のある潜在的なエラーを特定し、フラグを立てるのに役立ちます。これにより、アプリケーションを運用環境にデプロイする前に、これらの問題を修正できます。

厳密モードの無効化

ただし、運用環境では、二重レンダリングは不要です。 Strict モードのデバッグの利点を使用する予定がない場合は、これを無効にすることができます。

Strict モードを無効にする 1 つの方法は、 を確実に実行することです。は、index.js ファイルでアプリケーションをラップしていません:

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

// Disabled Strict Mode
ReactDOM.render(
  app,
  document.getElementById('root')
);

を削除することで、タグを使用してこのデバッグ動作を無効にすると、コンポーネントは運用環境で 1 回だけレンダリングされます。

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