React コンポーネントが 2 回レンダリングされるのはなぜですか?

React コンポーネントの 2 回のレンダリング: トラブルシューティング

React は、UI に必要な変更のみをレンダリングする効率性で知られています。ただし、開発者は、明らかな理由もなくコンポーネントが 2 回レンダリングされるという問題に遭遇することがあります。この問題は、特にレンダリングされたデータが 2 回目のレンダリングで正しいように見える場合に、特に複雑になる可能性があります。

ケース スタディ: 電話番号検索コンポーネントの 2 回のレンダリング

特定のこの場合、開発者は、URL パラメータから取得した電話番号に関連付けられたポイントの検索を担当する React コンポーネントでこの問題に遭遇しました。コンポーネントは 2 回レンダリングされました。最初のレンダリングではポイントがゼロの電話番号のみが表示されましたが、2 回目のレンダリングではすべてのデータが正しく表示されました。

解決策: 厳密モードのデバッグ

上開発者が提供したコンポーネントのソース コードを調べると、コンポーネントが React の Strict モードで実行されていることが明らかになりました。このモードは、開発環境でレンダリング関数の二重呼び出しを意図的にトリガーし、レンダリング プロセス中の潜在的な副作用を検出しやすくします。

Strict モードを無効にする

この問題で、開発者はアプリのindex.jsファイル内の厳密モードタグをコメントアウトしました。これにより、実質的に Strict モードが無効になり、コンポーネントが単一の期待どおりにレンダリングされるようになりました。

React.StrictMode: Purpose and Effects

一方、Strict モードはデバッグに役立ちます。副作用があるため、その動作を理解することが重要です。これは開発モードでのみ動作し、レンダー関数の二重呼び出しをトリガーして、不注意による副作用を特定するのに役立ちます。

追加のレンダリングにつながる可能性のある潜在的な副作用の詳細については、公式 React ドキュメントを参照してください。 React.StrictMode:

• https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-Effects

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