Bekerja dengan data dalam React: Properties & State

Komponen React Gunakan dua jenis data: sifat dan keadaan. Ciri -ciri adalah nilai input yang digunakan apabila membuat komponen dan keadaan permulaan, dan sekali komponen instantiated, mereka harus dianggap tidak berubah. Sebaliknya, data status boleh diubah oleh komponen dan biasanya disambungkan ke pengendali acara komponen.

mata utama

Komponen React membahagikan data ke dalam sifat yang tidak berubah dan keadaan berubah -ubah untuk lebih jelas mengenal pasti peranan setiap data dan hubungannya dengan komponen. Atribut lebih popular kerana mereka memudahkan aliran data. Status berguna untuk menangkap kemas kini data yang disebabkan oleh interaksi pengguna dan peristiwa UI yang lain. Hubungan antara atribut dan negeri memudahkan aliran data dalam komponen.
• Atribut
adalah nilai input yang digunakan apabila memberikan komponen dan memulakan keadaan. Sebaik sahaja komponen itu diterapkan, sifat -sifat harus dianggap tidak berubah. Selepas instantiasi komponen, sifat tidak boleh diubah. Menukar nilai dalam komponen dianggap keadaan dan harus dikesan menggunakan atribut negeri dan bukannya atribut prop. Menukar sifat tidak mencetuskan kemas kini komponen, yang boleh menyebabkan komponen dan atribut tidak disegerakkan.
• Status
Menunjukkan data yang diubah oleh komponen, biasanya melalui interaksi dengan pengguna. Sebelum komponen boleh menggunakan Negeri, Negeri mesti dimulakan melalui fungsi
• . Selepas memulakan keadaan, nilai keadaan boleh digunakan apabila memberikan komponen, sama seperti nilai atribut. Untuk menangani perubahan keadaan, gunakan fungsi getInitialState untuk menetapkan nilai baru pada sifat keadaan yang sesuai. setState

Jenis Data Komponen

Data dalam komponen React disimpan sebagai harta atau negeri. Sifat adalah nilai input untuk komponen. Mereka digunakan apabila membuat komponen dan keadaan permulaan (dibincangkan kemudian). Selepas menafikan komponen, sifat harus dianggap tidak berubah. Nilai harta hanya boleh ditetapkan apabila komponen itu dimasukkan, dan kemudian apabila komponennya diberikan semula dalam DOM, React membandingkan nilai harta lama dan baru untuk menentukan kemas kini DOM yang diperlukan.

Data status boleh diubah oleh komponen dan biasanya disambungkan ke pengendali acara komponen. Biasanya, mengemas kini status mencetuskan komponen React untuk membuat semula sendiri. Sebelum komponen dimulakan, keadaannya mesti dimulakan. Nilai permulaan mungkin termasuk nilai malar dan nilai atribut (seperti yang diterangkan di atas). Berbanding dengan rangka kerja seperti angular.js, sifat boleh dianggap data terikat sehala, dan negara boleh dianggap data terikat dua hala. Ini bukan analogi yang sempurna, kerana angular.js menggunakan satu objek data dalam dua cara yang berbeza, sementara React menggunakan dua objek data, masing -masing dengan tujuan khususnya.

Properties

Artikel React sebelumnya memperkenalkan sintaks untuk menentukan dan mengakses sifat. Artikel ini meneroka penggunaan JavaScript dan JSX serta sifat statik dan dinamik dalam pelbagai demonstrasi kod. Memperluas penerokaan sebelumnya, mari kita lihat beberapa butiran menarik tentang menggunakan sifat.

Apabila menambah nama kelas CSS ke komponen, anda mesti menggunakan nama atribut className bukan class. React perlu melakukan ini kerana ES2015 mengenal pasti class sebagai kata kunci terpelihara dan digunakan untuk menentukan objek. Untuk mengelakkan kekeliruan dengan kata kunci ini, nama atribut className digunakan. Jika anda menggunakan harta yang bernama class, React memaparkan mesej konsol yang berguna yang memberitahu pemaju bahawa anda perlu menukar nama harta kepada className.

Apabila menukar harta

ke class, mesej amaran tidak akan dipaparkan. className

Di samping nama atribut seperti

, terdapat aspek lain yang menarik dari atribut React. Sebagai contoh, menukar sifat komponen adalah anti-corak. Hartanah boleh ditetapkan apabila memberi instanti kepada komponen, tetapi tidak boleh diubah kemudian. Ini termasuk perubahan sifat selepas memberi instanti kepada komponen dan selepas rendering. Menukar nilai dalam komponen dianggap keadaan dan dikesan menggunakan atribut negeri dan bukannya atribut prop.

className Komponen boleh diubah, di mana React akan melaksanakan proses penyelarasannya untuk menentukan bagaimana nilai harta baru mempengaruhi DOM. DOM kemudian akan dikemas kini dengan perubahan.

status

Status Menunjukkan data yang diubah oleh komponen, biasanya melalui interaksi dengan pengguna. Untuk memudahkan perubahan ini, daftar pengendali acara untuk elemen DOM yang sesuai. Apabila peristiwa berlaku, nilai yang dikemas kini diambil dari DOM dan komponen diberitahu tentang status baru. Sebelum komponen boleh menggunakan Negeri, Negeri mesti dimulakan melalui fungsi

. Biasanya, fungsi

memulakan keadaan menggunakan nilai statik, atribut yang diluluskan, atau datastores lain. getInitialState getInitialState Apabila keadaan diasaskan, nilai keadaan boleh digunakan apabila memberikan komponen seperti nilai atribut. Untuk menangkap interaksi pengguna dengan keadaan terkini, pengendali acara didaftarkan. Untuk mengekalkan komponen React sendiri, objek fungsi pengendali acara boleh diluluskan sebagai atribut atau boleh ditakrifkan secara langsung dalam definisi objek komponen itu sendiri.

Salah satu manfaat React ialah penggunaan peristiwa HTML standard. Acara HTML standard termasuk objek acara HTML standard. Tiada pembelajaran perpustakaan acara khas, pengendali acara, atau objek acara tersuai diperlukan. Kerana pelayar moden sebahagian besarnya serasi, perpustakaan silang pelayar pertengahan seperti jQuery tidak diperlukan. Untuk menangani perubahan keadaan, gunakan fungsi

untuk menetapkan nilai baru pada sifat keadaan yang sesuai. Memanggil fungsi ini menyebabkan komponen untuk membuat semula sendiri.

setState

Kesimpulan

Komponen React menyediakan dua kaedah untuk memproses data: sifat dan keadaan. Membahagikan data ke dalam sifat yang tidak berubah dan keadaan berubah dapat lebih jelas mengenal pasti peranan setiap data dan hubungannya dengan komponen. Umumnya, sifat lebih disukai kerana mereka memudahkan aliran data. Status berguna untuk menangkap kemas kini data yang disebabkan oleh interaksi pengguna dan peristiwa UI yang lain. Hubungan antara atribut dan negeri memudahkan aliran data dalam komponen. Atribut boleh digunakan untuk memulakan negeri, dan nilai negeri boleh digunakan untuk menetapkan sifat apabila instantiating dan rendering komponen. Tangkap nilai baru dari interaksi pengguna melalui negeri dan kemudian gunakannya untuk mengemas kini sifat. Aliran data yang lebih besar dalam aplikasi dilakukan melalui corak yang dipanggil fluks.

(Berikut adalah bahagian FAQ. Oleh kerana batasan ruang, saya akan meringkaskan dan mengekalkan maklumat utama. Sila rujuk teks asal untuk jawapan yang lengkap)

FAQ

• Perbezaan antara atribut dan keadaan: sifat adalah nilai input yang tidak berubah, dan keadaan adalah data yang berubah -ubah di dalam komponen.
• Komponen induk meluluskan data kepada komponen kanak -kanak: melalui harta prop.
• Status kemas kini: Gunakan kaedah . setState
• Dapatkan data dari API: biasanya digunakan dalam kaedah kitaran componentDidMount atau perpustakaan lain. fetch Atribut kelas
• : Tambah atribut contoh secara langsung pada kelas.
• Gunakan prop: sebagai parameter fungsi dalam komponen fungsi.
• status digunakan dalam komponen fungsi: Gunakan cangkuk. useState
• Perbezaan antara komponen kelas dan komponen fungsi: Komponen kelas adalah kelas ES6, kaedah negara dan kitaran hayat;
• Peristiwa Pemprosesan: Pengendali acara menggunakan unta biasanya perlu terikat dalam pembina.
• Kaedah kitaran hayat: , componentDidMount, componentDidUpdate, componentWillUnmount, dan lain -lain.

Sila ambil perhatian bahawa output ini mempunyai pseudo-asal teks asal dan mengekalkan semua imej dan format asalnya. Saya menggunakan penggantian sinonim, pelarasan struktur kalimat, dan kaedah penggabungan perenggan, berusaha untuk membuat artikel hadir ungkapan yang berbeza tanpa mengubah makna asal.

Atas ialah kandungan terperinci Bekerja dengan data dalam React: Properties & State. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!