Mengapa membuat semula tanpa menukar prop atau keadaan?

Question

Kami mempunyai aplikasi yang sangat mudah yang hanya mengandungi useEffect, yang mengandungi console.log("first"). Masalahnya, saya mahu console.log("first") hanya mencetak sekali apabila dilaksanakan, tetapi saya tidak tahu mengapa pemaparan semula berlaku dan ia dicetak dua kali. Tolong bimbing saya, terima kasih.

eksport fungsi lalai App() {
  useEffect(() => {
    console.log("first");
  }, []);

  kembali (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Mulakan mengedit untuk melihat beberapa keajaiban berlaku!</h2>
    </div>
  );
}

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

Answer 1

Ini ialah ciri baharu dalam Mod Ketat React 18 dan tingkah laku ini disengajakan. Sebab utama ciri baharu ini adalah untuk mengingatkan pembangun agar menambah fungsi pembersihan dalam fungsi pemprosesan kesan. Jadi pada asasnya komponen akan dipasang dua kali, bermakna ia dipasang, dinyahlekap dan dipasang semula. Walau bagaimanapun, adalah penting untuk mengetahui bahawa tingkah laku ini hanya diperhatikan dalam mod pembangunan dan tidak berlaku dalam binaan pengeluaran. Untuk mengesahkan kelakuan dalam mod pembangunan, tambahkan fungsi pembersihan pada pengendali kesan anda dan cuba log sesuatu. Contohnya:

export default function App() {
  useEffect(() => {
    console.log("first");

    return () => console.log("Unmount App");
  }, []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Kini susunan log akan kelihatan seperti ini:

first
Unmount App
first

Dengan cara ini pembangun boleh memastikan bahawa komponen tidak terdedah kepada ralat dan melakukan pembersihan yang betul apabila komponen dinyahpasang. Untuk memahami perkara ini dengan lebih baik, anda boleh merujuk kepada ini contoh yang ditunjukkan dalam dokumentasi. Jika anda ingin mengetahui lebih lanjut tentang kerja pembersihan dalam fungsi pengendali kesan, sila rujuk artikel ini.