プロップや状態を変更せずに再レンダリングするのはなぜでしょうか?
P粉786800174
2023-08-13 11:04:44
<p><code>useEffect</code> だけを含む非常に単純なアプリケーションがあり、このアプリケーションには <code>console.log("first")</code> が含まれています。
問題は、<code>console.log("first")</code> を実行時に 1 回だけ印刷したいのですが、なぜ再レンダリングが発生して 2 回印刷されるのかがわかりません。ご指導ください、ありがとうございます。 </p>
<pre class="brush:php;toolbar:false;">デフォルト関数 App() をエクスポート {
useEffect(() => {
console.log("最初");
}、[]);
戻る (
<div className="アプリ">
<h1>Hello CodeSandbox</h1>
<h2>編集を開始して、魔法が起こるのを見てみましょう!</h2>
</div>
);
}</pre>
<p>https://codesandbox.io/s/silly-kilby-yn38cj?file=/src/App.tsx</p>
これは React 18 の Strict モードの新機能であり、この動作は意図的なものです。この新機能の主な理由は、開発者にエフェクト処理関数にクリーンアップ関数を追加するよう促すことです。したがって、基本的にコンポーネントは 2 回マウントされます。つまり、マウント、アンマウント、および再マウントが行われます。ただし、この動作は開発モードでのみ観察され、運用ビルドでは発生しないことを知っておくことが重要です。 開発モードでの動作を確認するには、クリーンアップ関数をエフェクト ハンドラーに追加し、何かをログに記録してみてください。例えば:### リーリー
ログの順序は次のようになります:リーリー
これにより、開発者はコンポーネントでエラーが発生しにくくなり、コンポーネントのアンインストール時に適切なクリーンアップを実行できるようになります。 これをよりよく理解するには、ドキュメントに示されているthis の例を参照してください。 エフェクト ハンドラー関数のクリーンアップ作業について詳しく知りたい場合は、this の記事を参照してください。