Hari ke-5 Belajar React: Batching dan Functional Updates

Saya menyangka memanggil state setter berkali-kali akan menyebabkan render yang berulang kali.

Saya silap.

React lebih bijak daripada itu. Ia menggunakan proses yang dipanggil Automatic Batching.

Daripada melakukan render selepas setiap kemas kini, React mengumpulkannya bersama. Ia mengumpul semua kemas kini dan melakukan satu render sahaja. Ini menjimatkan prestasi.

Inilah yang saya pelajari hari ini.

Proses Batching Apabila anda memanggil pelbagai fungsi state, React mengikut aliran ini:

  • Pelbagai kemas kini state berlaku.
  • React melakukan batching terhadapnya.
  • React melakukan satu render.
  • React melaksanakan (commits) perubahan tersebut ke UI.

Masalah dengan Kemas Kini Standard Saya cuba kod ini: setCount(count + 1); setCount(count + 1); setCount(count + 1);

Saya menjangkakan count akan meningkat dari 0 ke 3. Sebaliknya, ia hanya meningkat dari 0 ke 1.

Ini berlaku kerana setCount(count + 1) tidak bermaksud "tambah nilai count." Ia bermaksud "tetapkan count kepada nilai spesifik ini."

Jika count adalah 0, setiap baris memberitahu React untuk menetapkan count kepada 1. React melakukan batching terhadap semua ini dan melihat bahawa arahan terakhir adalah untuk menetapkan count kepada 1.

Penyelesaian: Functional Updates Untuk membetulkannya, anda mesti menggunakan functional update. Ini menggunakan state terkini yang tersedia dalam update queue.

Cara yang betul: setCount((prev) => prev + 1);

Apabila anda menggunakan corak ini, React memberikan nilai yang paling terkini kepada setiap kemas kini.

  • Kemas kini pertama: 0 + 1 = 1
  • Kemas kini kedua: 1 + 1 = 2
  • Kemas kini ketiga: 2 + 1 = 3

Sekarang, kaunter tersebut benar-benar mencapai 3.

Kesilapan Biasa Saya pernah menulis: setCount((prev) => { prev + 1 });

Kaunter tersebut menjadi undefined. Apabila anda menggunakan kurungan beralun (curly braces) dalam fungsi anak panah (arrow function), anda mesti menggunakan kata kunci return. Gunakan ini sebagai ganti: setCount((prev) => prev + 1);

Perkara Penting:

  • React melakukan batching pada pelbagai kemas kini state untuk meningkatkan kelajuan.
  • Panggilan setState tidak sentiasa mencetuskan render serta-merta.
  • Kemas kini standard menggunakan nilai daripada kitaran render semasa.
  • Functional updates menggunakan state terkini daripada update queue.
  • React menggunakan Update Queue dalaman untuk menguruskan perubahan ini.

Sumber: https://dev.to/bismay-exe/day-5-of-learning-react-understanding-automatic-batching-functional-updates-397k