ホームページ > ウェブフロントエンド > jsチュートリアル > React の開発モードで useState() が二重レンダリングをトリガーするのはなぜですか?

React の開発モードで useState() が二重レンダリングをトリガーするのはなぜですか?

Linda Hamilton
リリース: 2024-10-24 06:08:30
オリジナル
712 人が閲覧しました

Why Does useState() Trigger Double Renders in React's Development Mode?

開発モードで useState() が二重レンダリングを引き起こすのはなぜですか?

React では、状態管理に useState を使用すると、状態中に 2 つのレンダリングがトリガーされる場合があります更新情報。この動作は、潜在的な副作用をシミュレートすることで開発デバッグを強化する React の Strict モードに起因すると考えられます。

次のコード スニペットを検討してください。

import React, { useState } from "react";
...
const [number, setNumber] = useState(0);
...
function changeNumber() {
    setNumber(state => state + 1);
}
...
ログイン後にコピー

changeNumber 関数をトリガーするボタンをクリックすると、コンポーネントの再レンダリングを通知する 2 つのコンソール ログが観察される場合があります。これは、開発環境で useState updater などの関数を強制的に 2 回実行する Strict モードによるものです。

React のドキュメントでは、Strict モードでは、状態アップデータ関数などの特定の関数を意図的に再呼び出しすることで潜在的な副作用を検出し、強調表示すると説明されています。 useState に渡されるものと同様です。目的は、デバッグを容易にし、確実な動作を確実にすることです。

この二重レンダリングを軽減するには、アプリケーションのエントリ ポイントから次のコードを削除してストリクト モードを無効にします。

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);
ログイン後にコピー

以上がReact の開発モードで useState() が二重レンダリングをトリガーするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート