React.js : Memilih Struktur Negeri

Jika anda suka artikel saya, anda boleh belikan saya kopi atau kongsikan :)

---

Dalam artikel ini, kami akan mengkaji perkara penting apabila memilih struktur keadaan dalam projek react.js kami.

---

Memilih Struktur Negeri

Apabila menulis komponen bertindak balas, kita perlu memutuskan berapa banyak keadaan yang sepatutnya ada dalam komponen dan cara kita akan menggunakan keadaan ini. Contohnya, semasa menulis komponen, kami menggunakan 3 keadaan dan komponen kami berfungsi dengan betul, tetapi anda perasan bahawa anda boleh menulis komponen yang sama menggunakan 3 keadaan. Oleh itu, anda perlu memutuskan struktur keadaan.

---

Saya akan bercakap tentang 5 prinsip untuk membantu anda membuat keputusan yang lebih baik apabila memilih struktur keadaan.

1. Kumpulan Pembolehubah Keadaan Berkaitan

Fikirkan watak dalam permainan komputer, watak ini boleh bergerak dalam koordinat x dan y. Jadi, jika anda mahu menulis nilai x dan y ini sebagai keadaan, bagaimanakah anda akan melakukannya?

• Pendekatan Buruk :

• Pendekatan Lebih Baik :

Secara teknikal, anda boleh menggunakan salah satu daripada pendekatan ini. Tetapi, ** Jika anda sentiasa mengemas kini dua atau lebih pembolehubah keadaan pada masa yang sama, pertimbangkan untuk menggabungkannya ke dalam pembolehubah keadaan tunggal**.

Dan Jika anda tidak tahu berapa banyak keadaan yang anda perlukan, anda boleh himpunkan keadaan menggunakan objek atau tatasusunan.

---

2. Elakkan Percanggahan dalam Negeri.

Fikirkan apl pemesejan. Anda tahu bahawa terdapat dua peringkat berbeza apabila anda memberikan kelulusan untuk menghantar mesej. Yang pertama ialah "mesej sedang dihantar" dan yang kedua ialah "mesej telah dihantar". Jadi, apakah perkara pertama yang terlintas di fikiran kita jika kita mengisytiharkan dua keadaan ini sebagai dua keadaan berbeza, benar dan palsu ?

• Pendekatan Buruk (Risiko Konflik) :

Memandangkan isSending dan isSent tidak sepatutnya benar pada masa yang sama, adalah lebih baik untuk menggantikannya dengan satu pembolehubah keadaan status yang mungkin mengambil salah satu daripada tiga keadaan sah: 'menaip', 'menghantar' dan 'menghantar'

• Pendekatan Lebih Baik :

---

3. Elakkan Keadaan Berlebihan

Apabila memilih struktur keadaan komponen, anda perlu Jika anda boleh mengira beberapa maklumat daripada prop komponen atau keadaan sedia ada pembolehubah, anda tidak sepatutnya simpan maklumat ini dalam keadaan komponen.

• Pendekatan Buruk :

• Pendekatan Lebih Baik :

** Apabila anda memanggil setFirstName atau setLastName, anda mencetuskan pemaparan semula, dan kemudian Nama penuh seterusnya akan dikira daripada data baharu.**

---

Kesimpulan

Menstrukturkan keadaan dengan baik memastikan anda mempunyai komponen yang mudah diubah suai dan nyahpepijat. Dalam artikel ini, saya bercakap tentang 3 prinsip yang perlu dipertimbangkan apabila memilih struktur keadaan. Mungkin terdapat lebih banyak prinsip ini. Jika anda mahu, anda boleh bercakap tentang prinsip ini dalam ulasan.

Atas ialah kandungan terperinci React.js : Memilih Struktur Negeri. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!