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

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

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

<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"));

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);

ReactElement

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

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

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=&#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>

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!