React cangkuk: luka yang mendalam-tutorial css-php.cn

React memperkenalkan cangkuk dalam versi 16.8 dan telah menambah lebih banyak cangkuk sejak itu. Sesetengah cangkuk lebih biasa digunakan dan popular daripada yang lain, seperti useeffect , useState , dan useContext . Jika anda menggunakan React, saya percaya anda mesti menggunakan cangkuk ini.

Tetapi apa yang saya minati adalah cangkuk Reacts yang kurang dikenali. Walaupun semua cangkuk React mempunyai ciri-ciri mereka sendiri, saya benar-benar ingin menunjukkan kepada anda lima cangkuk kerana mereka mungkin tidak muncul dalam pekerjaan sehari-hari anda-atau mungkin, mengetahui bahawa mereka memberi anda beberapa kuasa besar tambahan. katalog

usereducer

usereducer Hook adalah alat pengurusan status yang serupa dengan cangkuk lain. Khususnya, ia adalah alternatif kepada cangkuk useState .

Jika anda menggunakan cangkuk usereducer untuk menukar dua atau lebih negeri (atau tindakan), anda tidak perlu mengendalikannya secara berasingan. Cangkuk itu menjejaki semua negeri dan menguruskannya secara kolektif. Dalam erti kata lain: Ia menguruskan dan membuat semula perubahan keadaan. Tidak seperti useState cangkuk, usereducer lebih mudah apabila berurusan dengan banyak negeri dalam projek kompleks.

senario penggunaan

usereducer boleh membantu mengurangkan kerumitan pengendalian pelbagai negeri. Ia boleh digunakan apabila anda mendapati diri anda perlu mengesan pelbagai negeri secara kolektif, kerana ia membolehkan anda merawat pengurusan negeri dan membuat logik komponen sebagai kebimbangan berasingan.

sintaks

usereducer menerima tiga parameter, salah satunya adalah pilihan:

`useref`

useref Hook digunakan untuk membuat rujukan mengenai unsur -unsur untuk mengakses DOM. Tetapi bukan hanya itu, ia mengembalikan objek dengan atribut . Oleh itu, nilai useref kekal tidak berubah antara renders;

Senario Penggunaan

Apabila anda mahu:

memanipulasi DOM dengan maklumat pembolehubah yang disimpan.
Maklumat akses dalam komponen kanak -kanak (elemen leher).
Tetapkan fokus pada elemen.

THE useref cangkuk boleh digunakan. Ia paling berguna apabila menyimpan data yang berubah-ubah dalam aplikasi anda tanpa menyebabkan penanaman semula.

sintaks

useref hanya menerima satu parameter, iaitu nilai awal .

 const newRefComponent = useref (initialValue);

Salin selepas log masuk

Contoh

const FocusRandomInput = () = & gt; Tambah penghakiman untuk mengelakkan ralat rujukan null rawak.current.focus (); div>);} aplikasi lalai eksport;

Perhatikan bahawa menaip setiap aksara dalam medan teks akan mengemas kini status aplikasi, tetapi tidak akan mencetuskan semula sepenuhnya.

`useImperativeHandle`

Adakah anda tahu bagaimana komponen kanak -kanak mengakses fungsi yang disampaikan kepada mereka dari komponen induk? Komponen induk melepasi fungsi ini melalui prop, tetapi jenis lulus ini dalam erti kata "satu arah" kerana komponen induk tidak dapat memanggil fungsi dalam komponen kanak-kanak.

Kemudian, useImperativeHandle membolehkan komponen ibu bapa mengakses fungsi kanak -kanak.

Bagaimana kerja ini?

Tentukan fungsi dalam komponen kanak -kanak.
Tambah ref dalam komponen induk.
Kami menggunakan forwardref , yang membolehkan ref ditakrifkan untuk diserahkan kepada komponen kanak -kanak.
useImperativeHandle mendedahkan fungsi komponen kanak -kanak melalui Ref.

Senario penggunaan

useImperativeHandle berfungsi dengan baik apabila anda mahu komponen induk dipengaruhi oleh perubahan dalam komponen kanak -kanak. Oleh itu, kes -kes seperti mengubah tumpuan, peningkatan dan penurunan, dan unsur -unsur kabur mungkin menjadi kes di mana anda mendapati diri anda perlu menggunakan cangkuk ini untuk mengemas kini komponen induk dengan sewajarnya.

Syntax

useImperativeHandle (Ref, CreateHandle, [Dependencies])

Contoh

Dalam contoh ini, kita mempunyai dua butang, satu dalam komponen ibu bapa dan satu dalam komponen kanak -kanak. Mengklik butang induk membolehkan kami mengambil data dari komponen kanak -kanak, yang membolehkan kami memanipulasi komponen induk. Ia disediakan dalam mengklik butang kanak -kanak tidak lulus apa -apa dari komponen induk ke komponen kanak -kanak untuk membantu menggambarkan bagaimana kita lulus kandungan ke arah yang bertentangan.

); (! cetak); Kotak {cetak & amp; & amp; daripada cangkuk reaksi yang paling biasa digunakan tetapi menarik. Ia meningkatkan prestasi dan mengurangkan latensi, terutamanya dalam pengkomputeran besar dalam aplikasi. Bagaimana mungkin ini berlaku? Hook useMemo menghalang React dari mengira semula nilai setiap kali keadaan komponen dikemas kini dan komponennya diberikan semula.

Anda akan melihat bahawa fungsi itu bertindak balas terhadap perubahan keadaan. useMemo Hook menerima fungsi dan mengembalikan nilai pulangan fungsi . Ia cache nilai untuk mengelakkan kerja tambahan daripada dibelanjakan untuk membuatnya semula, dan kemudian mengembalikannya apabila salah satu kebergantungan berubah.

Proses ini dipanggil Hafalan , yang membantu meningkatkan prestasi dengan mengingati nilai yang diminta sebelum ini supaya ia dapat digunakan semula tanpa mengulangi semua pengiraan ini.

Senario Penggunaan

Kes penggunaan terbaik akan menjadi bila -bila masa anda berurusan dengan pengiraan berat yang anda ingin menyimpan nilai dan menggunakannya dalam perubahan keadaan berikutnya. Ia boleh membawa rangsangan prestasi yang baik, tetapi terlalu banyak penggunaannya boleh mempunyai kesan bertentangan yang tepat, dengan itu mengambil memori aplikasi.

sintaks

useMemo (() = & gt; {// code here}, [])

Contoh

Saya telah menambah banyak nol ke gelung untuk meningkatkan kuasa pengiraannya. Ia mengembalikan nilai dalam beberapa saat dan masih berfungsi dengan baik kerana useMemo cangkuk.

 // usememo.js import react, {useState, usememo} dari 'react' function memo () {const [memoone, setMemoone] = useState (0); 1000000000) {i} // Meningkatkan jumlah pengiraan memoone % 2 === 0; squaredNumber = useMemo (() = & gt; {let i = 0; sementara (i & lt; 100000000) {i} // meningkatkan jumlah pengiraan console.log ("kuadrat nombor"); /butang> <p> walaupun: {isEven? ); fungsi itu sendiri. </p>  <p> </p><h3> <code> usecallback </code> </h3>  <p> </p><p> <code> usecallback </code> cangkuk adalah satu lagi cangkuk yang menarik, dan bahagian sebelumnya adalah spoiler ciri -cirinya. </p>  <p> </p><p> Seperti yang kita lihat, <code> useCallback </code> berfungsi sama dengan cangkuk <code> usememo </code>, kerana mereka semua menggunakan memori untuk cache kandungan tertentu untuk kegunaan kemudian. <code> useMemo </code> menyimpan pengiraan fungsi sebagai nilai cache, manakala <code> useCallback </code> menyimpan dan mengembalikan fungsi. </p>  <p> </p><h4> senario penggunaan </h4>  <p> </p><p> seperti <code> usememo </code>, <code> useCallback </code> adalah pengoptimuman prestasi yang baik kerana ia menyimpan dan mengembalikan panggilan balik yang horpor dan mana-mana kebergantungannya tanpa reaksi. </p>  <p> </p><h4> sintaks </h4>  <pre class="brush:php;toolbar:false"> const getMemoizedCallback = useCallback () = & gt; {dosomething ()}, []); Kanak -kanak "; import" ./app.css "aplikasi fungsi lalai eksport () {const [toggle, settoggle] = useState (false); const [data, setData] = useState ("Saya adalah data yang tidak akan berubah pada setiap render, terima kasih kepada useCallback"); Togol & amp; & amp; <callbackchild returnfunction="{returnfunction}/"> ); {ReturnFunction ("Hook!")} ; <p> ... (sampel atau perihalan output sampel hendaklah disertakan di sini) </p> <p> </p>
<h3> ringkasan </h3>  <p> </p>
<p> Itu sahaja! Kami hanya melihat lima cangkuk reaksi yang sangat berguna yang saya fikir sering diabaikan. Seperti banyak ulasan sedemikian, kami hanya menyentuh permukaan cangkuk ini. Mereka masing -masing mempunyai kehalusan dan langkah berjaga -jaga yang perlu dipertimbangkan semasa menggunakannya. Tetapi semoga anda mempunyai konsep maju yang baik untuk apa yang mereka ada dan apabila mereka lebih sesuai daripada cangkuk lain yang mungkin anda gunakan lebih kerap. </p>  <p> </p>
<p> Cara terbaik untuk memahami sepenuhnya mereka adalah amalan. Oleh itu, saya menggalakkan anda untuk berlatih menggunakan cangkuk ini dalam aplikasi anda untuk lebih memahami mereka. Untuk melakukan ini, anda boleh mengetahui lebih lanjut mengenainya dengan melihat sumber -sumber berikut: </p>  <cre> <code> - intro untuk bertindak Code> </code></cre></callbackchild>

Salin selepas log masuk

Atas ialah kandungan terperinci React cangkuk: luka yang mendalam. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!