プロップや状態を変更せずに再レンダリングするのはなぜでしょうか?

Question

useEffect だけを含む非常に単純なアプリケーションがあり、このアプリケーションには console.log("first") が含まれています。 問題は、console.log("first") を実行時に 1 回だけ印刷したいのですが、なぜ再レンダリングが発生して 2 回印刷されるのかがわかりません。ご指導ください、ありがとうございます。

デフォルト関数 App() をエクスポート {
  useEffect(() => {
    console.log("最初");
  }、[]);

  戻る （
    <div className="アプリ">
      <h1>Hello CodeSandbox</h1>
      <h2>編集を開始して、魔法が起こるのを見てみましょう!</h2>
    </div>
  );
}

https://codesandbox.io/s/silly-kilby-yn38cj?file=/src/App.tsx

Answer 1

これは React 18 の Strict モードの新機能であり、この動作は意図的なものです。この新機能の主な理由は、開発者にエフェクト処理関数にクリーンアップ関数を追加するよう促すことです。したがって、基本的にコンポーネントは 2 回マウントされます。つまり、マウント、アンマウント、および再マウントが行われます。ただし、この動作は開発モードでのみ観察され、運用ビルドでは発生しないことを知っておくことが重要です。 開発モードでの動作を確認するには、クリーンアップ関数をエフェクト ハンドラーに追加し、何かをログに記録してみてください。例えば：＃＃＃ リーリー

ログの順序は次のようになります:

リーリー

これにより、開発者はコンポーネントでエラーが発生しにくくなり、コンポーネントのアンインストール時に適切なクリーンアップを実行できるようになります。 これをよりよく理解するには、ドキュメントに示されている

this の例を参照してください。 エフェクト ハンドラー関数のクリーンアップ作業について詳しく知りたい場合は、this の記事を参照してください。