Apakah yang dilakukan oleh react-dom?

Fungsi "react-dom" adalah untuk menjadikan DOM maya ke dalam dokumen dan mengubahnya menjadi DOM sebenar ialah "react-dom" yang perlu digunakan semasa membangunkan projek bertindak balas menyediakan kaedah khusus DOM, yang boleh Digunakan pada peringkat atas aplikasi, ia juga boleh digunakan sebagai antara muka untuk manipulasi DOM khas di luar model React.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 17.0.1, komputer Dell G3.

Apakah peranan react-dom?

Apabila menggunakan react untuk membangunkan halaman web, dua pakej akan dimuat turun, satu adalah react dan satu lagi adalah react-dom ialah kod teras React-dom ialah bahagian yang berkaitan dengan operasi DOM yang dilucutkan daripada React.

Idea teras tindak balas ialah DOM maya React termasuk fungsi react.createElement yang menjana DOM maya dan kelas Komponen. Apabila kita merangkum komponen sendiri, kita perlu mewarisi kelas Komponen untuk menggunakan fungsi kitaran hayat, dsb. Fungsi teras pakej react-dom adalah untuk menjadikan DOM maya ini menjadi dokumen dan mengubahnya menjadi DOM sebenar.

react-dom ialah kit alat yang perlu digunakan semasa membangunkan projek react Ia merupakan pelaksanaan platform untuk dom, terutamanya digunakan untuk pemaparan di bahagian web. Pakej react-dom menyediakan kaedah khusus DOM yang boleh digunakan di peringkat atas aplikasi atau sebagai antara muka untuk operasi khas pada DOM di luar model React.

react-dom terutamanya mengandungi tiga API: findDOMNode, unmountComponentAtNode dan render. Yang berikut diperkenalkan mengikut urutan pencetus.

1. render

render digunakan untuk memaparkan DOM maya yang diberikan oleh React kepada DOM penyemak imbas Ia biasanya digunakan dalam komponen peringkat teratas. Kaedah ini melekapkan elemen ke dalam bekas dan mengembalikan contoh elemen (iaitu rujukan rujukan Jika ia merupakan komponen tanpa kewarganegaraan, render akan mengembalikan nol. Apabila komponen dimuatkan, panggilan balik akan dipanggil. Sintaksnya ialah:

render(ReactElement element,DOMElement container,[function callback])

Contohnya:

import React from 'react'
import ReactDOM from 'react-dom'
import Router from './router'
import { Provider } from 'react-redux'
import store from './store'
// Provider react-redux的内容
ReactDOM.render(
  <Provider store={store}>
    <Router/>
  </Provider>, document.getElementById(&#39;root&#39;))

2 findDOMNode

findDOMNode digunakan untuk mendapatkan elemen DOM sebenar dalam. perintah kepada nod DOM untuk beroperasi.

Sebelum ini, anda mesti tahu terlebih dahulu: Dalam React, DOM maya sebenarnya ditambah pada HTML dan ditukar kepada DOM sebenar selepas komponen dipasang (render()), jadi kita boleh menggunakan componentDidMount dan componentDidUpdate. Diperolehi dalam dua cara. Contohnya adalah seperti berikut:

import { findDOMNode } from 'react-dom';
<Example ref={ node=>{ this.node = node} }> // 利用ref获取Example组件的实例
const dom = findDOMNode(this.node); // 通过findDOMNode获取实例对应的真实DOM

Nota: Apabila melibatkan operasi yang kompleks, terdapat banyak elemen DOM API yang tersedia Walau bagaimanapun, operasi DOM akan memberi impak yang besar kepada prestasi, jadi operasi DOM harus diminimumkan .

3. unmountComponentAtNode

unmountComponentAtNode digunakan untuk melaksanakan operasi nyahlekap dan dilaksanakan sebelum componentWillUnmount.

Pembelajaran yang disyorkan: "tutorial video bertindak balas"

Atas ialah kandungan terperinci Apakah yang dilakukan oleh react-dom?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!