React: Mengapa perilaku default useEffect dijalankan di setiap render?

Dibuat pada 26 Nov 2019  ·  3Komentar  ·  Sumber: facebook/react

Apakah Anda ingin meminta fitur atau melaporkan bug ?
Pertanyaan desain API tentang useEffect

Apa perilaku saat ini?
Saat ini useEffect berjalan di setiap render. Perilaku default ini bisa berbahaya dalam situasi seperti menangani permintaan HTTP saat Anda lupa meneruskan argumen kedua. Ini sepertinya menjadi kesalahan umum terutama bagi pendatang baru seperti saya. Saya tidak dapat memikirkan banyak (apa pun) pola di mana Anda ingin menjalankan useEffect pada setiap render. Apa alasan di balik tidak default untuk dijalankan sekali?

Question

Semua 3 komentar

Dengan desain API:

useEffect(
    () => {
        // do something
    },
    [/* dependency list */]
);

useEffect hanya akan berjalan ketika daftar ketergantungan berubah, dan array kosong [] berarti tidak ada ketergantungan (yaitu hanya akan berjalan sekali). Rasanya logis bagi saya bahwa daftar ketergantungan yang tidak ditentukan berarti menjalankan fungsi yang dibungkus oleh useEffect setiap render.

Saya tidak dapat memikirkan banyak (apa pun) pola di mana Anda ingin menjalankan useEffect pada setiap render. Apa alasan di balik tidak default untuk dijalankan sekali?

Misalkan Anda sangat baru dalam React, dan Anda ingin melakukan sesuatu setiap kali variabel useState berubah (misalnya POST nilai baru ke server).

  • Dengan perilaku saat ini, Anda akan POST nilai yang sama beberapa kali, tetapi Anda tidak akan pernah melewatkan memposting nilai yang diubah.
  • Dengan perilaku yang Anda sarankan, hanya nilai awal/perubahan pertama yang akan di-POST, dan perubahan lebih lanjut tidak akan memicu panggilan balik useEffect .

Saya pikir daftar ketergantungan dimaksudkan untuk lebih merupakan pengoptimalan/bantuan kinerja untuk penyederhanaan kode.

API saat ini memungkinkan Anda untuk memutuskan antara perilaku berikut:

  • Jalankan efeknya setiap saat. Ini meniru perilaku componentDidMount + componentDidUpdate kelas lama.
  • Jalankan efeknya hanya sekali. Ini meniru perilaku componentDidMount .
  • Jalankan efeknya hanya ketika dependensi berubah. Ini agak baru, meskipun Anda dapat (dan sering melakukannya) mengimplementasikan hal yang sama dengan komponen this.props dan prevProps di API komponen kelas.

Perilaku "default" yang Anda jelaskan (ketika Anda tidak secara eksplisit menentukan dependensi) seringkali paling aman karena mencegah nilai basi digunakan dalam closures .

Di masa depan, mudah-mudahan kami akan menyediakan beberapa jenis kompiler untuk membantu mengotomatisasi banyak hal ini. Sementara itu, kami menyediakan plug-in ESLint resmi untuk membantu membuatnya sedikit lebih mudah. 😄

Apakah halaman ini membantu?
0 / 5 - 0 peringkat