Panduan Penuh Untuk Pembangun React

siaran ini akan membantu memahami semua keperluan konsep untuk mula bekerja dengan projek.

mari mulakan!

(DOM) ialah antara muka pengaturcaraan untuk dokumen web(halaman).
supaya program boleh menukar struktur dokumen, gaya dan kandungan.
DOM mewakili dokumen sebagai nod dan objek; dengan cara itu, bahasa pengaturcaraan boleh berinteraksi dengan halaman.

Kitaran hayat komponen?
mempunyai tiga fasa utama: Fasa Melekap, Fasa Mengemas kini dan Fasa Nyahlekap.
MountingPhase bermula apabila komponen pertama kali dibuat dan dimasukkan ke dalam DOM.
Fasa Kemas Kini berlaku apabila keadaan komponen atau prop berubah.
Dan UnmountingPhase berlaku apabila komponen dialih keluar daripada DOM.

apa itu komponen ?
Komponen adalah bit kod bebas dan boleh digunakan semula.
Ia mempunyai tujuan yang sama seperti fungsi JavaScript, tetapi berfungsi secara berasingan dan mengembalikan HTML.
Komponen terdapat dalam dua jenis, komponen Kelas dan komponen Fungsi.

Perbezaan komponen kelas dan komponen Fungsi ?

• komponen kelas lebih berguna apabila kita mahu lebih terkawal ke atas setiap peringkat kaedah kitaran hayat.
• komponen kelas ialah cara tradisional untuk mencipta komponen.
• dengan bantuan cangkuk malah kini komponen berfungsi boleh diuruskan keadaan. cangkuk dilepaskan dalam tindak balas 13.
• Komponen fungsi dianggap "tanpa keadaan". Dengan penambahan Cangkuk, komponen Fungsi kini hampir setara dengan komponen Kelas.

keadaan bertindak balas ?

• Logik && Operator: cth

{cars.length > 0 &&
      <h2>
        You have {cars.length} cars in your garage.
      </h2>
    }

• Operator Ternary: mis

condition ? true : false

usestate() ?
ia serupa dengan pembolehubah dalam bahasa pengaturcaraan. tempat kami boleh menyimpan dan mengemas kini data atau menyatakan.

kesan guna() ?
ia dilaksanakan sekali apabila komponen dicipta. dan jalankan apabila terdapat sebarang keadaan perubahan yang ditambahkan dalam suntikan kebergantungan.
membolehkan anda melakukan kesan sampingan seperti mengambil data daripada API, mengemas kini DOM atau melanggan acara.

useLayoutEffect() ?
Cangkuk useLayoutEffect adalah serupa dengan useEffect, tetapi ia dilaksanakan secara serentak selepas semua mutasi DOM.
Ini menjadikannya berguna untuk memanipulasi DOM serta-merta selepas komponen dipaparkan.
cth. gunakan useLayoutEffect untuk mengukur saiz elemen

useReducer() ?
UseReducer Hook adalah serupa dengan useState Hook.
gunakan apabila kita ingin menguruskan pengurusan negeri yang lebih kompleks.
UseReducer Hook mengembalikan keadaan semasa dan kaedah penghantaran.

usecontext() ?
Cangkuk dalam React ini digunakan untuk menggunakan nilai daripada konteks React.
Ia membenarkan komponen berfungsi mengakses nilai yang disediakan oleh penyedia konteks yang lebih tinggi dalam pokok komponen tanpa memerlukan penggerudian prop.
Cipta konteks cth.

{cars.length > 0 &&
      <h2>
        You have {cars.length} cars in your garage.
      </h2>
    }

Sediakan nilai menggunakan Penyedia Konteks cth.

condition ? true : false

Gunakan nilai konteks menggunakan useContext cth.

const MyContext = React.createContext();

cth. Konteks React ialah cara untuk mengurus keadaan secara global.

useCallback() ?
Menghafal fungsi, menghalangnya daripada dicipta semula pada setiap pemaparan jika kebergantungan kekal tidak berubah.
Berguna untuk mengoptimumkan prestasi dengan mengelakkan pemaparan semula komponen kanak-kanak yang tidak perlu.

useMemo() ?
Ia menghafal nilai, menghalangnya daripada dikira semula pada setiap pemaparan jika kebergantungan kekal tidak berubah.
Ia berguna untuk mengoptimumkan pengiraan mahal atau transformasi data yang kompleks.

userref() ?
UseRef Hook membolehkan anda mengekalkan nilai antara pemaparan.
Ia boleh digunakan untuk menyimpan nilai boleh ubah yang tidak menyebabkan pemaparan semula apabila dikemas kini.
Ia boleh digunakan untuk mengakses elemen DOM secara langsung.
Selalunya digunakan untuk mengakses atau memanipulasi elemen DOM.

guna imperativehandle() ?
cangkuk membolehkan anda menyesuaikan nilai contoh yang terdedah kepada komponen induk apabila menggunakan ref.
ia seperti menambah antara muka tertentu pada komponen parenet.

usedebugvalue() ?
yang membolehkan anda memaparkan maklumat penyahpepijatan tersuai untuk cangkuk tersuai dalam React DevTools.

Terangkan blok binaan React ?
Komponen: Ini ialah blok kod boleh guna semula yang mengembalikan HTML.
JSX: Ia adalah singkatan untuk JavaScript dan XML dan membenarkan untuk menulis HTML dalam React.
Props dan State: props adalah seperti parameter fungsi dan State adalah serupa dengan pembolehubah.
Konteks: Ini membolehkan data dihantar melalui komponen sebagai prop dalam hierarki.
DOM Maya: Ia adalah salinan ringan DOM sebenar yang menjadikan manipulasi DOM lebih mudah.

ReactJS Reconciliation ?
React Reconciliation ialah proses yang melaluinya React mengemas kini DOM Penyemak Imbas.
Ia mengemas kini DOM maya dahulu dan kemudian menggunakan algoritma pembezaan untuk membuat kemas kini yang cekap dan dioptimumkan dalam DOM Sebenar.

Bertindak balas terhadap komponen tulen ?
Komponen tulen bertindak balas ialah komponen yang tidak dipaparkan semula apabila nilai prop dan keadaan telah dikemas kini dengan nilai yang sama.

ingin tahu lebih lanjut tentang saya, tulis sahaja sallbro di enjin carian...

Atas ialah kandungan terperinci Panduan Penuh Untuk Pembangun React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!