Strict モードで状態が更新されるたびにコンポーネントが 2 回レンダリングされるのはなぜですか?

状態の更新とコンポーネントのレンダリングについて

厳密モードを明示的に有効にしていないにもかかわらず、状態の更新ごとにコンポーネントが 2 回レンダリングされる問題は、 React の Strict モードの使用。

React では、App コンポーネントは React.StrictMode 内にラップされます:

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

React のドキュメントによると:

Strict Mode は副作用を自動的に検出することはできませんが、副作用をもう少し確定的にすることで、副作用を発見するのに役立ちます。これは、次の関数を意図的に二重呼び出しすることによって行われます:

• 状態アップデータ関数 (setState の最初の引数)
• useState、useMemo、または useReducer に渡される関数

この例では、onClick ハンドラーに渡された ChaneNumber 関数は、useState を使用して状態更新をトリガーします。その結果、React は開発モードでこの関数を意図的に二重呼び出しします。これにより、コンポーネントは状態の更新ごとに 2 回レンダリングされます。

この動作は、開発者が状態の更新によって引き起こされる潜在的な副作用やパフォーマンスの問題を特定できるようにすることを目的としています。 React は関数を 2 回実行することで、副作用が 2 回発生することを保証し、潜在的な問題のデバッグと対処が容易になります。

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