Rumah > Artikel > hujung hadapan web > Apakah maksud unsur tindak balas?
elemen tindak balas ialah nilai pulangan bagi fungsi "React.createElement", iaitu, ReactElement, struktur ReactElement ialah "const element = {Element $$typeof: REACT_ELEMENT_TYPE,key: key,ref: ref; , props: props, _owner: owner, };".
Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 16.9.0, komputer Dell G3.
Apakah maksud unsur tindak balas?
Kod sumber React |.
JSXSebagai sintaks rasmi React yang ditetapkan, JSX membenarkan pengguna memasukkan kod HTML dalam kod JS. Walau bagaimanapun, cara penulisan ini tidak boleh dihuraikan oleh penyemak imbas. Mereka memerlukan penukar, dan Babel memainkan peranan sedemikian. Ia menukar kod JSX kepada fail JS apabila ia disusun, supaya penyemak imbas boleh menghuraikannya. Bagaimana cara menukar? akan melakukannya untuk keserasian Atas sebab ini, menterjemah tatabahasa daripada versi yang lebih tinggi kepada versi yang lebih rendah adalah di luar skop perbincangan. Apa yang perlu kita perhatikan sebenarnya adalah cara HTMl diproses. Sebagai contoh, baris kod berikut:<div id='name'>Tom and Jerry</div>
React.createElement("div", {
id: "name"}, "Tom and Jerry");
<div class='wrapper' id='id_wrapper'>
<span>Tom</span>
<span>Jerry</span></div>React.createElement("div", {
class: "wrapper",
id: "id_wrapper"
}, React.createElement("span", null, "Tom"), React.createElement("span", null, "Jerry"));
function Comp() {
return '<div>Tom and Jerry</div>'
}
<Comp></Comp>
function Comp() {
return '<div>Tom and Jerry</div>';
}
React.createElement(Comp, null);
function comp() {
return '<div>Tom and Jerry</div>'
}
<comp></comp>
function comp() {
return '<div>Tom and Jerry</div>';
}
React.createElement("comp", null);
Inilah sebabnya apabila kami menulis komponen dalam React, kami memerlukan huruf pertama untuk digunakan dengan huruf besar Semasa menyusun, Babel akan menganggap komponen dengan huruf kecil sebagai nod HTMl asli untuk diproses huruf kecil, program seterusnya tidak akan dapat mengenali komponen ini dan akhirnya akan melaporkan ralat. ReactElement
const element = {
// This tag allows us to uniquely identify this as a React Element $$typeof: REACT_ELEMENT_TYPE,
// Built-in properties that belong on the element type: type,
key: key,
ref: ref,
props: props,
// Record the component responsible for creating this element. _owner: owner,
};
<div class='class_name' id='id_name' key='key_name' ref='ref_name'>
<span>Tom</span>
<span>Jerry</span>
</div>
React.createElement("div", {
class: "class_name",
id: "id_name",
key: "key_name",
ref: "ref_name"}, React.createElement("span", null, "Tom"), React.createElement("span", null, "Jerry"));
$$typeof ialah pemalar dan semua elemen yang dijana oleh React.createElement mempunyai nilai ini. Secara amnya, komponen yang menggunakan React digantung pada this.props.children daripada komponen induk, tetapi terdapat pengecualian Sebagai contoh, jika anda ingin melaksanakan kotak modal, anda perlu melekapkan kotak modal di bawah nod badan , anda perlu menggunakan ReactDOM Fungsi createPortals(child, container) dilaksanakan Nilai $$typeof yang dijana oleh fungsi ini ialah REACT_PORTAL_TYPE.
jenis merujuk kepada jenis ReactElement ini
kunci dan ref ialah konfigurasi khas yang terdapat dalam objek konfigurasi, ekstrak secara berasingan dan letakkan di bawah ReactElement
props mengandungi dua bahagian Bahagian pertama ialah konfigurasi dengan kunci dan ref dialih keluar, dan bahagian kedua ialah susunan kanak-kanak ahli tatasusunan juga merupakan objek yang dijana melalui React.createElement Langkah ini diabaikan dalam contoh.
_owner ialah Fiber dalam versi 16.7 Fiber ialah teras versi react16+, jadi kami tidak akan membincangkan butiran buat masa ini.
Melalui artikel ini, kami mengetahui bahawa nod HTML dalam JSX ditukar menjadi objek ReactElement bersarang dengan bantuan Babel Maklumat ini berguna untuk membina aplikasi Struktur pepohon sangat penting, dan React melepaskan diri daripada batasan platform dengan menyediakan jenis data ini.
Pembelajaran yang disyorkan: "tutorial video bertindak balas"
Atas ialah kandungan terperinci Apakah maksud unsur tindak balas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!