Membaca Komponen React yang Dijana

18 minitPertengahanReact

Dalam pelajaran ini

Baca komponen mengikut susunan tetap: state, effect, handler, JSX
Kenal pasti tiga bug yang sering dihasilkan pembantu AI: mutasi state, key yang hilang, stale closure
Sahkan setiap pembaikan melalui tingkah lakunya, bukan sekadar rupa kod

Idea utama

Kod React yang dijana biasanya dipaparkan dengan baik pada kali pertama. Bug-nya bersembunyi dalam apa yang berlaku seterusnya: kemas kini yang tidak re-render, senarai yang guna semula baris yang salah, effect yang mengingati nilai lama.

Komponen dalam editor "dijana" untuk prompt ringkas: perancang belajar dengan senarai topik dan pemasa sesi. Ia nampak kemas dan boleh dipaparkan. Sebelum teruskan membaca, cuba dulu: tanda satu kotak, buang satu topik, perhatikan pemasa.

Baca mengikut susunan tetap

State — apa yang komponen ini ingat? (topics, draft, seconds)
Effect — apa yang berjalan selepas render, dan nilai apa yang ditangkapnya?
Handler — adakah setiap kemas kini mencipta data baharu, atau mengubah data lama di tempatnya?
JSX — adakah senarai ada key yang stabil? Adakah apa-apa dipaparkan daripada data yang mungkin tiada?

Apa berlaku apabila state berubah

function Counter() {  const [count, setCount] = useState(0);  return (    <div>      <h3>Clicks</h3>      <p>Count: {count}</p>      <button onClick={() => setCount(count + 1)}>+1</button>    </div>  );}

1Event
2Kemas kini statecount = 0
3Render semula
4Kemas kini DOM

Di skrin

Clicks

Count: 0

DOM

div

├ h3 → "Clicks"

├ p

├ "Count: "

└ "0"

└ button → "+1"

Klik +1 (atau butang setCount) untuk melihat setiap langkah.

Dipermudahkan: React juga menggabungkan (batch) beberapa kemas kini sekali gus, dan reconciliation serta commit mempunyai lebih banyak langkah. Diperlahankan supaya mudah diikuti.

React re-render bila state berubah kepada nilai baharu. Objek yang sama dimasukkan → tiada re-render.

Tanda bahaya 1: mutasi state

Apa yang ditulis pembantu AI

JSX

topics.splice(index, 1); // changes the old array
setTopics(topics);        // same array → React skips the update

Apa yang dihantar oleh penyemak

JSX

setTopics(topics.filter((t) => t.id !== id)); // new array

push, splice, sort, reverse dan obj.x = … semuanya mengubah data di tempatnya. React membandingkan state lama dan baharu melalui rujukan, jadi kemas kini itu diabaikan — sehingga sesuatu yang lain re-render dan perubahan itu muncul "secara rawak".

Tanda bahaya 2: key yang hilang atau tidak stabil

Tanpa key, React memadankan item senarai mengikut kedudukan. Buang topik pertama dan topik kedua akan dilukis ke dalam DOM baris pertama — termasuk kotak semaknya. Console memberi amaran (Each child in a list should have a unique "key" prop), tetapi kod jana AI selalunya dihantar dengan amaran itu diabaikan. Guna index array sebagai key pun ada masalah yang sama. Guna id yang stabil daripada data.

Tanda bahaya 3: stale closure dalam effect

Apa yang ditulis pembantu AI

JSX

useEffect(() => {
  const timer = setInterval(() => {
    setSeconds(seconds + 1); // "seconds" is always 0 here
  }, 1000);
  return () => clearInterval(timer);
}, []);

Apa yang dihantar oleh penyemak

JSX

useEffect(() => {
  const timer = setInterval(() => {
    setSeconds((s) => s + 1); // always uses the latest value
  }, 1000);
  return () => clearInterval(timer);
}, []);

Effect itu berjalan sekali sahaja ([]), jadi callback-nya menangkap seconds daripada render pertama selama-lamanya. Functional update meminta nilai semasa daripada React.

Berita baik: kod jana AI itu juga buat beberapa perkara dengan betul — preventDefault() semasa submit, trim input, spread untuk menambah, dan fungsi cleanup untuk interval. Menyemak bermaksud perasan kedua-duanya.

Klik Remove pada satu topik. Tiada apa berlaku — kemudian, sekejap lagi, pemasa berdetik dan senarai tiba-tiba berubah. Kelewatan itu ialah tanda klasik state yang dimutasi. Tulis semula removeTopic supaya ia mencipta array baharu dan bukannya mengubah array lama.

Semakan

Klik Remove mengemas kini senarai serta-merta
Kiraan topik juga dikemas kini

Uji kefahaman

Handler yang dijana melakukan todo.done = true; setTodos(todos);. Apa yang berlaku?

Ia berfungsi — React membandingkan array secara mendalamUI mungkin tidak dikemas kini, kerana todos ialah rujukan array yang samaReact menghasilkan error tentang mutasi

Yang manakah key terbaik untuk senarai topik yang dimuat daripada pangkalan data?

key={index}key={Math.random()}key={topic.id}

Kenapa setSeconds(seconds + 1) di dalam setInterval berhenti pada 1?

Callback interval menangkap seconds = 0 daripada render pertama dan tidak pernah nampak nilai baharusetInterval hanya berjalan sekali dalam ReactPelayar mengehadkan pemasa kepada satu detik

Apa yang anda pelajari

Baca komponen mengikut susunan: state → effect → handler → JSX.
Jangan mutasi state; bina array/objek baharu dengan filter, map dan spread.
Senarai perlukan key yang stabil daripada data — dan amaran console ialah dapatan semakan.
Callback dalam effect menangkap nilai lama; guna functional update atau dependency yang betul.

Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.