Menguruskan Keadaan dalam Berbilang Kejadian Komponen Yang Sama dalam React

Apabila anda bekerja dengan React dan mempunyai berbilang kejadian komponen yang sama, keadaan pengurusan boleh menjadi rumit. Bergantung pada cara komponen anda perlu berinteraksi, anda perlu mengendalikan keadaan secara berbeza. Inilah yang saya dapati berfungsi dengan baik.

Kejadian Bebas: Simpan Keadaan di dalam Komponen

Jika komponen anda tidak perlu bercakap antara satu sama lain, lebih baik untuk mengekalkan keadaannya di dalam komponen. Dengan cara ini, setiap kejadian mempunyai keadaannya sendiri dan perubahan dalam satu kejadian tidak menjejaskan yang lain.

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

// Usage
<Counter /> // Instance 1
<Counter /> // Instance 2

Di sini, setiap komponen Kaunter menjejaki kiraan sendiri. Jadi, jika anda mengklik butang dalam satu kaunter, ia tidak mengubah kiraan di kaunter yang lain.

Kejadian Bergantung: Urus Keadaan dalam Komponen Induk

Tetapi jika komponen perlu berkongsi beberapa keadaan atau berfungsi dengan cara yang diselaraskan, lebih baik untuk mengalihkan keadaan itu kepada komponen induk. Ibu bapa boleh mengurus keadaan kongsi dan menurunkannya sebagai prop. Ini memastikan semua keadaan kekal segerak dan berfungsi bersama dengan lancar.

function Parent() {
  const [sharedCount, setSharedCount] = useState(0);

  return (
    <div>
      <p>Total Count: {sharedCount}</p>
      <Counter count={sharedCount} setCount={setSharedCount} />
      <Counter count={sharedCount} setCount={setSharedCount} />
    </div>
  );
}

function Counter({ count, setCount }) {
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Pendekatan ini berfungsi kerana apabila keadaan berada dalam komponen induk, sebarang kemas kini kepada keadaan tersebut mencetuskan pemaparan semula semua kejadian, memastikan semuanya memaparkan UI terkini. Jika keadaan disimpan dalam setiap tika secara berasingan, hanya tika dengan perubahan keadaan akan dipaparkan semula, yang membawa kepada UI yang tidak konsisten merentas tika.

Contoh daripada Projek Saya

Saya memikirkan perkara ini semasa membina komponen akordion. Berikut ialah dua contoh daripada kerja saya sendiri:

• Kejadian Akordion Bebas: contoh. Dalam persediaan ini, setiap tikar akordion berfungsi secara berasingan.

• Kejadian Akordion Bergantung: contoh. Dalam versi ini, semua tika akordion bergantung antara satu sama lain dan kekal segerak.

Rekap Pantas

• Jika komponen berfungsi secara berasingan, kekalkan keadaan di dalam setiap komponen.

• Jika mereka perlu berkongsi negeri atau bekerja bersama-sama dengan cara yang diselaraskan, uruskan keadaan dalam ibu bapa.

Pendekatan ini membuat perubahan besar kepada saya apabila membina contoh akordion ini. Semoga ia membantu anda juga!

Atas ialah kandungan terperinci Menguruskan Keadaan dalam Berbilang Kejadian Komponen Yang Sama dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!