React: Komponen teras membina antara muka pengguna interaktif

React adalah perpustakaan front-end JavaScript yang popular untuk membina antara muka pengguna interaktif. Keluk pembelajarannya agak rata, yang merupakan salah satu sebab yang telah menarik perhatian baru -baru ini.

Walaupun terdapat banyak konsep penting untuk dipelajari, komponen tidak diragukan lagi teras React. Pemahaman yang mendalam tentang komponen akan menjadikan perjalanan pembangunan reaksi anda lebih mudah.

Prasyarat

Tutorial ini adalah untuk pemula yang baru mula belajar bertindak balas dan perlu mempunyai pemahaman yang lebih baik tentang komponen. Kami akan bermula dengan asas komponen dan kemudian secara beransur -ansur menyelam ke dalam konsep yang lebih mencabar seperti corak komponen dan bila menggunakannya. Kami akan merangkumi kategori komponen yang berbeza, seperti komponen kelas dan komponen fungsi, komponen negara dan tanpa statistik, dan komponen kontena dan komponen persembahan.

Mari mulakan!

Apa itu komponen?

Komponen adalah entiti kecil yang serba lengkap, bebas yang menggambarkan sebahagian daripada UI. UI aplikasi boleh dibahagikan kepada komponen yang lebih kecil, masing -masing dengan kod, struktur, dan API sendiri.

Sebagai contoh, apabila anda melihat aplikasi web Facebook, ia mempunyai beribu -ribu ciri yang saling berkaitan. Menariknya, Facebook mengandungi 30,000 komponen dan bilangannya semakin meningkat. Senibina komponen membolehkan anda memikirkan setiap komponen secara bebas. Setiap komponen boleh mengemas kini segala -galanya dalam skopnya tanpa bimbang tentang bagaimana ia mempengaruhi komponen lain.

Jika kita mengambil UI Facebook sebagai contoh, bar carian akan menjadi calon komponen yang sesuai. Suapan berita Facebook boleh membentuk komponen lain (atau komponen yang mengandungi banyak subkomponen). Semua kaedah dan panggilan AJAX yang berkaitan dengan bar carian akan terletak di dalam komponen ini.

Komponen juga boleh diguna semula. Ini mudah dilaksanakan jika anda perlu menggunakan komponen yang sama di beberapa tempat. Dengan sintaks JSX, anda boleh mengisytiharkan komponen di mana sahaja anda perlu memaparkannya.

<code><div>
<br>    Kiraan semasa: {Count}<br><hr>
<br>    {/* Contoh kebolehgunaan semula komponen*/}<br>            updateCount = {setCount (count 1)}/><br>            updateCount = {setCount (count-1)}/><br>
</div>
<br></code>

Props dan Negeri

Komponen memerlukan data untuk berfungsi. Anda boleh menggabungkan komponen dan data dalam dua cara yang berbeza: sebagai alat atau negeri . Props dan Negeri menentukan bagaimana komponen diberikan dan berkelakuan. Mari kita mulakan dengan alat peraga.

Memahami alat peraga

Jika komponen adalah fungsi JavaScript biasa, maka props adalah input fungsi. Menurut analogi ini, komponen mengambil input (kami memanggilnya prop), memprosesnya, dan kemudian membuat beberapa kod JSX.

Walaupun data dalam prop boleh diakses oleh komponen, falsafah React adalah bahawa props harus tidak berubah dan atas ke bawah. Ini bermakna komponen induk boleh lulus apa -apa data yang dikehendaki kepada komponen kanak -kanak sebagai alat peraga, tetapi komponen kanak -kanak tidak dapat mengubah suai propnya. Jadi, jika anda cuba mengedit alat seperti di bawah, anda akan mendapat "tidak dapat memberikan nilai kepada ralat baca sahaja". Cangkuk useState() digunakan seperti berikut:

 <code>const [count,setCount] = useState(0);<br></code>

Anda kemudian boleh menggunakan setCount() untuk mendapatkan kiraan semasa.

Komponen kelas

Komponen kelas mungkin lebih kompleks daripada komponen berfungsi, tetapi sesetengah orang lebih suka gaya ini.

Anda boleh membuat komponen kelas dengan memperluaskan super() untuk lulus kandungan yang diwarisi dari kelas induk.

Perhatikan bahawa pembina adalah pilihan apabila menentukan komponen. Dalam kes di atas, komponen tidak mempunyai keadaan dan pembina nampaknya tidak melakukan sebarang operasi yang berguna. props.

Amalan terbaik adalah untuk mengesyorkan menggunakan pembina untuk semua komponen kelas.

Juga, jika anda menggunakan pembina, anda perlu memanggil super() , jika tidak, anda akan mendapat ralat "Hilang Super () Panggilan dalam Pembina".

Titik terakhir saya adalah mengenai menggunakan pembolehubah count dan count jika anda menggunakan cangkuk atau this.setState() untuk mengemas kini keadaan. Hook useState() mengembalikan fungsi kedua yang membolehkan anda mengemas kini keadaan dengan nilai baru.

 <code>// 這有效<br><br>// 鉤子<br>const [count,setCount] = useState(0);<br> setCount(count value);<br><br> // 類組件<br>handleCount(value) {<br>    this.setState({count: this.state.count value});<br> }<br></code>

Kemudian setCount() mengambil objek sebagai input, kami meningkatkan nilai count sebelumnya sebanyak 1, yang berfungsi seperti yang diharapkan. Walau bagaimanapun, ada masalah. Apabila terdapat pelbagai setState() untuk meningkatkan kiraan sebanyak 100, kemudian kemas kini ke 1, dan kemudian padamkan 100 yang telah ditambah sebelumnya. Jika setState() tidak segerak, dan pelbagai prevState adalah rujukan kepada negeri-negeri terdahulu dan dijamin terkini. React.memo digunakan untuk cangkuk. Semua ini mungkin terdengar sedikit mengelirukan apabila anda baru bertindak balas. Sekiranya hasil yang sama dijamin dikembalikan apabila alat dan negeri yang sama diberikan, komponen itu dipanggil komponen murni. Komponen tanpa statik adalah contoh yang hebat dari komponen murni, kerana diberi input yang anda tahu apa yang akan anda lakukan.

 <code>const HelloWorld = ({name}) => (<br></code> {`Hi $ {name}`}<br> );<br>

Jika komponen anda tulen, anda boleh mengoptimumkannya dengan PureComponent . Kaedah ini mengubah tingkah laku kemas kini komponen React. Secara lalai, komponen React sentiasa dikemas kini apabila keadaan atau prop berubah. Walau bagaimanapun, jika anda menggunakan memo , React melakukan perbandingan cetek pada prop dan keadaan, yang bermaksud anda membandingkan kandungan langsung objek dan bukannya membandingkan semua pasangan kunci/nilai objek. Oleh itu, hanya rujukan objek yang dibandingkan, yang mungkin tidak berfungsi seperti yang dijangkakan jika negeri atau prop diubahsuai.

 <code>// 類組件<br>class MyComponent extends React.PureComponent { // 使用它代替React.Component<br> // ...<br> }<br><br> // 鉤子<br>const MyComponent = React.memo(function MyComponent(props) { // 將組件函數(shù)包裝在React.memo 中<br> // ...<br> });<br></code>

React.memo digunakan untuk mengoptimumkan prestasi, dan melainkan jika anda mempunyai beberapa jenis masalah prestasi, tidak ada sebab untuk mempertimbangkan menggunakannya.

Pemikiran terakhir

Komponen fungsi dan cangkuk biasanya lebih mudah daripada rakan -rakan komponen kelas mereka, jadi melainkan jika anda mempunyai keutamaan khas, komponen fungsi adalah pilihan terbaik.

Dalam tutorial ini, anda mempunyai gambaran keseluruhan tahap seni bina berasaskan komponen dan corak komponen yang berbeza dalam React.

Artikel ini telah dikemas kini dan termasuk sumbangan Jacob Jackson. Jacob adalah pemaju web, penulis teknologi, freelancer dan penyumbang sumber terbuka.

Atas ialah kandungan terperinci Komponen Fungsi Berkuatkuasa yang Berkuatkuasa dalam Reaksi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!