Beginilah Cara Semua Pemaju Reaksi Baik Menstruktur Keadaan Mereka.

Keadaan komponen React yang tidak berstruktur adalah tempat pembiakan ralat, pepijat dan penyahpepijatan yang sukar. Keadaan yang tersusun dengan baik, bagaimanapun, menghasilkan komponen yang lebih bersih, lebih boleh diselenggara dan lebih mudah dinyahpepijat. Mari kita terokai prinsip utama untuk pengurusan negeri yang berkesan.

Asas Penstrukturan Data

Komponen tindak balas selalunya bergantung pada keadaan. Bilangan pembolehubah keadaan dan sifat dalam keadaan objek adalah pilihan pembangun. Walaupun dengan penstrukturan yang kurang ideal, komponen mungkin berfungsi, tetapi kita boleh berusaha untuk lebih baik. Garis panduan ini akan membantu anda membuat keputusan termaklum tentang struktur keadaan komponen anda:

1. Gabungkan Negeri Saling Berhubung: Keadaan yang kerap dikemas kini harus dikumpulkan. Walaupun pemisahan keadaan boleh diterima, penggabungan keadaan yang saling berkaitan mengurangkan risiko ralat penyegerakan dengan ketara. Contohnya, pertimbangkan nisbah bidang:

// Less efficient:
const [height, setHeight] = useState(500);
const [width, setWidth] = useState(500);

// More efficient:
const [aspectRatio, setAspectRatio] = useState({ width: 500, height: 500 });

Ingat, apabila bergabung menjadi objek, kemas kini semua sifat menggunakan operator hamparan untuk mengelakkan kehilangan data:

setAspectRatio({ ...aspectRatio, width: 750 }); // Correct
// setAspectRatio({ width: 750 }); // Incorrect

2. Elakkan Konflik Negeri: Pertimbangkan butang hantar. Anda mungkin menggunakan keadaan untuk menunjukkan pemuatan, ralat dan kejayaan. Struktur berikut bermasalah:

// Problematic structure:
const [loading, setLoading] = useState(false);
const [error, setError] = useState(false);
const [resolved, setResolved] = useState(true);

Persediaan ini membenarkan keadaan bercanggah (cth., memuatkan dan diselesaikan secara serentak). Pendekatan yang lebih baik menggunakan pemalar untuk mewakili keadaan:

// Improved structure:
const STATE = {
  loading: 'loading',
  error: 'error',
  resolved: 'resolved',
};
const [requestState, setRequestState] = useState(STATE.resolved);

Ini menghalang keadaan bercanggah dan memudahkan penjejakan ralat.

3. Elakkan Keadaan Tidak Diperlukan: Sebelum membuat keadaan, semak sama ada nilai boleh diperoleh daripada prop, keadaan sedia ada atau gabungan keadaan semasa pemaparan. Jika boleh diterbitkan, elakkan menambahnya sebagai keadaan komponen.

// Inefficient:
const [x, setX] = useState(0);
const [y, setY] = useState(0);
const [position, setPosition] = useState({ x: 0, y: 0 });

Di sini, position adalah berlebihan. Sama ada alih keluar position atau hapuskan x dan y.

4. Hapuskan Penduaan Keadaan: Keadaan pendua sukar untuk disegerakkan. Jika anda mendapati diri anda menggunakan berbilang keadaan untuk mengekalkan data yang sama, satukan mereka, yang berpotensi meningkatkan keadaan ke tahap komponen yang lebih tinggi.

5. Minimumkan Keadaan Bersarang: Keadaan bersarang dalam sukar dikemas kini. "Leperkan" atau "normalkan". Daripada objek bersarang, pertimbangkan untuk menggunakan tatasusunan ID dan pemetaan berasingan daripada ID kepada data. Kedalaman bersarang adalah pertukaran, tetapi keadaan lebih rata memudahkan kemas kini dan mengurangkan risiko pertindihan. Perpustakaan seperti Immer boleh membantu mengurus keadaan bersarang tidak berubah.

Jika anda mempunyai sebarang soalan, sila tinggalkan komen.

Atas ialah kandungan terperinci Beginilah Cara Semua Pemaju Reaksi Baik Menstruktur Keadaan Mereka.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!