Anda tidak tahu terbitan pada React

Kait React telah dikeluarkan 6 tahun lalu, tetapi sehingga hari ini, kita dapat melihat ralat dilakukan, walaupun oleh jurutera reaksi kanan. Dalam versi terbaru React docs, pasukan teras berusaha keras dalam mengajar kes penggunaan useEffect yang salah, tetapi ralat terus berlaku dalam projek sebenar.

Dalam siaran ini, mari cuba pendekatan yang berbeza. Mari fahami hubungan React dengan terbitan dan sebab anda perlu menggunakan lebih banyak daripadanya.

Kereaktifan

React tidak reaktif sepenuhnya, tetapi akhirnya, kepada pembangun yang mencipta apl, ia tidak begitu penting. Titik perbezaan di sini ialah pendekatan berbutir kasar React berikut mewujudkan keperluan pemaparan semula untuk benar-benar mengenal pasti perkara yang mengubah peralihan keadaan yang dibuat.

Jadi, fikirkan dalam komponen React yang mudah seperti ini:

function Example() {
  const [count, setCount] = useState(0)
  const text = `count is ${count}`;

  return (
    <button onClick={() => setCount((count) => count + 1)}>
      {text}
    </button>
  );
}

Apabila kami menukar keadaan kiraan, memanggil setCount, kami mengemas kini nilai keadaan dan menjadualkan pemaparan semula. Baiklah, React akan memaparkan semula komponen ini memanggilnya semula. Pada masa ini, jika saya bertanya React apa yang berubah pada pemaparan, apakah jawapan yang sepatutnya?

Mungkin seorang yang rendah hati “Saya tidak tahu”.

React tidak menjejaki keadaannya dengan struktur data yang kompleks yang menguruskan kebergantungannya seperti yang dilakukan oleh perpustakaan reaktif halus yang lain. React perlu memanggil komponen sekali lagi. Dalam panggilan baharu ini, pemalar kiraan yang dibuat akan mempunyai nilai baharu, dan di atasnya kita akan mencipta pemalar baharu dengan rentetan, contohnya “kiraan ialah 1”, jika nilai kiraan ditukar kepada 1.

Kemudian JSX akan menjana strukturnya dengan satu perubahan, teks dalam butang bukan “kiraan ialah 1”, React melakukan proses penyelarasan, mengenal pasti perubahan ini dan menerapkannya pada DOM sebenar. Jelas, bukan?

Pada masa ini, jika saya bertanya React apa yang berubah, ia mungkin akan menjawab: “Teks butang daripada komponen Contoh”.

Tetapi tunggu, bagaimana dengan pemalar teks? Ia juga berubah, mengapa ia hanya penting v-dom (Saya tahu masalah dengan istilah ini, tetapi ia adalah cara ia biasa dipanggil) struktur yang diciptanya?

Untuk React, pembolehubah dan pemalar yang anda buat secara dalaman tidak kira. Apa yang penting ialah keadaan berubah dan kemudian, pemulangan panggilan komponen.

Semua yang berada di tengah adalah sebahagian daripada proses mencipta struktur paparan. Sudah tentu, semua data ini boleh menjejaskan JSX pulangan, dan itulah titik model React, mengambil berat tentang hasil panggilan komponen dan mengemas kini DOM dengan sewajarnya dengan paparan.

Anda mungkin melihat pemudahan model React sebagai:

function Example() {
  const [count, setCount] = useState(0)
  const text = `count is ${count}`;

  return (
    <button onClick={() => setCount((count) => count + 1)}>
      {text}
    </button>
  );
}

Lihat sebagai hasil daripada fungsi keadaan. Pandangan dalam kes ini ialah terbitan yang berubah berdasarkan keadaan. Jadi, untuk istilah ini dan untuk data komponen dalaman, React ialah mesin terbitan.

Mesin Derivasi

Setiap pembolehubah dan pemalar yang anda buat di dalam komponen hanya akan hidup semasa panggilan komponen itu. Dalam contoh yang kami gunakan di atas, setiap pemaparan semula komponen Contoh mencipta teks tetap baharu. Jika saya perlu mempunyai nilai baharu berdasarkan beberapa prop atau keadaan, ia hanya akan mencipta pembolehubah baharu menggunakan keadaan dan prop tersebut dalam pengiraan.

React mencipta derivasi secara automatik, secara lalai.

Mari kita ambil contoh daripada React docs:

view= f(state)

Kami mempunyai beberapa isu di sini. Pertama sekali, sifat sesebuah negeri.

Mengapa kita memerlukan negeri tempatan seperti ini dalam apl? Untuk menyimpan data dan membenarkan pengguna mengubahnya. Keadaan Nama penuh tidak diubah oleh pengguna, tetapi oleh useEffect. Ia menggunakan keadaan lain untuk mencipta nilai baharu. Sekali lagi, dalam React, setiap pembolehubah dan pemalar yang kami cipta secara dalaman dalam komponen boleh menggunakan keadaan dan prop untuk mengira nilainya: derivasi, kelakuan lalai React.

Terdapat masalah lain dengan contoh ini, tentang masa jalan. Dalam kes ini, dalam paparan pertama, nilai Nama penuh akan menjadi rentetan kosong. React akan mendapat pulangan JSX komponen ini, memberikannya kepada UI, ikuti proses pengecatan penyemak imbas dan selepas itu, panggil useEffects komponen. Pada masa ini kita akan mempunyai panggilan setfullName, yang akan menjadualkan pemaparan semula baharu. React akan memanggil komponen itu sekali lagi, kini dengan Nama penuh sebagai Taylor Swift dan kemudian, kemas kini UI dengan nilai teks baharu.

Dari segi masa jalan, anda melakukan 2 pemaparan, salah satunya adalah yang tidak perlu, dengan data yang salah. Ia lebih teruk dari segi prestasi dan kestabilan, kerana pengguna akan melihat nilai sebagai kosong dan ia boleh dilihat sebagai pepijat visual.

Jadi, mengikut model terbitan React, kita boleh menukarnya kepada:

function Form() {
  const [firstName, setFirstName] = useState('Taylor');
  const [lastName, setLastName] = useState('Swift');

  // ? Avoid: redundant state and unnecessary Effect
  const [fullName, setFullName] = useState('');
  useEffect(() => {
    setFullName(firstName + ' ' + lastName);
  }, [firstName, lastName]);

  //...
  return <span>{fullName}</span>;
}

Kini kami hanya mempunyai 1 render, mengelakkan yang tidak perlu. Dan kita akan mengelakkan penggunaan kesan hanya menggunakan derivasi. Itu akan dikemas kini pada setiap pemaparan semula menggunakan versi terkini nilai keadaan.

Tetapi jika pengiraannya terlalu mahal? Atau jika saya mempunyai terlalu banyak keadaan dan ingin mengemas kini fullName hanya apabila firstName atau LastName berubah?

Betul, dalam kes ini hanya gunakan useMemo, tambahkan tatasusunan kebergantungan yang sama yang anda gunakan pada useEffect. Model memoisasi React hanyalah satu cara untuk mengelakkan tingkah laku lalai, iaitu untuk mencipta terbitan baharu pada setiap pemaparan semula. Dengan useMemo, anda menjejaki keadaan dan prop secara manual dan hanya mencipta terbitan semula jika sesetengah daripadanya telah berubah.

Bagaimana pula dengan useEffect?

useEffect diperlukan untuk penyegerakan luaran pada perubahan nilai. Mengenai pembangunan UI, terdapat sangat sedikit kes yang jarang berlaku di mana ini masuk akal, kerana biasanya perubahan luaran, seperti panggilan API pelayan, berlaku pada tindakan pengguna (kami sedang mencipta Antara Muka Pengguna, dengan cara itu), jadi ini akan berlaku pada pengendali acara, bukan dalam useEffect.

Jika anda menggunakan useEffect untuk mengemas kini keadaan, mungkin anda boleh melakukan kemas kini yang sama menggunakan derivasi, mengelakkan semua masalah yang dinyatakan sebelum ini.

Jika derivasi tidak berfungsi, atau anda mempunyai salah satu daripada beberapa kes tertentu, atau ada yang tidak kena dengan reka bentuk negeri atau dengan penyelesaian itu sendiri. Tiada masalah dengannya, tetapi dalam kes ini, adalah lebih baik untuk menyemak komponen dan mengelakkan masalah masa depan dengan kod komponen.

Ini ialah asas tentang terbitan dalam React, tetapi kami mempunyai sesuatu yang hilang di sini.

Apakah yang berlaku apabila saya perlu melakukan derivasi yang tidak segerak, seperti permintaan GET yang mudah, yang menggunakan beberapa keadaan sebagai param dan perlu dikira semula setiap kali keadaan berubah?

Ini ialah topik untuk siaran seterusnya.

Jumpa lagi!

Atas ialah kandungan terperinci Anda tidak tahu terbitan pada React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!