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 |.

JSX

Sebagai 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:

Kod yang dijana selepas penukaran oleh Babel ialah:

<div id=&#39;name&#39;>Tom and Jerry</div>

Sintaks HTML diubah menjadi sintaks JS Secara ringkasnya, JSX yang kita tulis akhirnya menjadi JS.

React.createElement("div", {
    id: "name"}, "Tom and Jerry");

Mari tulis contoh yang lebih rumit:

Peraturan penukaran agak mudah Parameter pertama React.createElement ialah jenis nod yang kedua parameter pertama ialah atribut nod, dalam bentuk key:value sebagai objek, dan semua parameter seterusnya ialah nod anak nod.

<div class=&#39;wrapper&#39; id=&#39;id_wrapper&#39;>
    <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"));

Perlu diambil perhatian bahawa dalam sintaks JSX, kami bukan sahaja mempunyai nod HTML asli, tetapi juga sejumlah besar komponen tersuai, seperti:

Ya Seperti yang anda lihat, parameter pertama React.createElement menjadi pembolehubah dan bukannya rentetan Cuba huruf kecil huruf pertama fungsi Comp:

function Comp() {
    return '<div>Tom and Jerry</div>'
}

<Comp></Comp>
function Comp() {
    return '<div>Tom and Jerry</div>';
}

React.createElement(Comp, null);

React.createElement. Parameter pertama menjadi rentetan sekali lagi.

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

Fungsi React.createElement muncul dengan kerap dalam kod JS yang disusun oleh Babel. Nilai pulangan bagi fungsi ini ialah ReactElement Seperti yang dapat dilihat daripada contoh di atas, fungsi React.createElement mempunyai tiga parameter input, atau tiga kategori.

jenis

jenis merujuk kepada jenis ReactElement ini.

• 
  
  

String seperti div, p mewakili DOM asli, dipanggil HostComponent

• Kelas Jenisnya ialah komponen yang kami warisi daripada Component atau PureComponent, dipanggil ClassComponent

• Kaedahnya ialah Komponen berfungsi

• Fragmen yang disediakan secara asli, AsyncMode, dan lain-lain adalah Simbol akan dilayan secara khusus

config

Rujuk kod yang disusun Babel di atas, semua nod Atribut akan diletakkan dalam objek konfigurasi dalam bentuk Key:Value.

• 
  
  

  kanak-kanak
Akan ada lebih daripada satu nod anak, jadi terdapat lebih daripada satu anak Semua parameter daripada parameter kedua dan seterusnya ialah kanak-kanak, iaitu tatasusunan .

• 
  
  

  Struktur ReactElement adalah seperti ini

Ia adalah objek yang mudah untuk melihat dengan jelas penciptaan daripada Peraturan objek ini, mari kita ambil contoh. Yang pertama ialah JSX yang kami tulis:

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,
  };

Ia akan disusun oleh Babel menjadi:

<div class=&#39;class_name&#39; id=&#39;id_name&#39; key=&#39;key_name&#39; ref=&#39;ref_name&#39;>
    <span>Tom</span>
    <span>Jerry</span>
</div>

Ia akan menjana sedemikian satu Elemen

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!