react-dom的作用是什么

這篇“react-dom的作用是什么”文章的知識點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“react-dom的作用是什么”文章吧。

“react-dom”的作用是將虛擬DOM渲染到文檔中變成實(shí)際DOM；“react-dom”是react開發(fā)項(xiàng)目時需要使用的工具包，提供了DOM特定的方法，可以在應(yīng)用程序的頂層使用，也可以作為React模型之外的特殊操作DOM的接口。

本教程操作環(huán)境：Windows10系統(tǒng)、react17.0.1版、Dell G3電腦。

react-dom有什么作用

在使用react開發(fā)網(wǎng)頁時，會下載兩個包，一個是react，一個是react-dom，其中react包是react的核心代碼，react-dom則是React剝離出的涉及DOM操作的部分。

react的核心思想是虛擬DOM，react包含了生成虛擬DOM的函數(shù)react.createElement，及Component類。當(dāng)我們自己封裝組件時，就需要繼承Component類，才能使用生命周期函數(shù)等。而react-dom包的核心功能就是把這些虛擬DOM渲染到文檔中變成實(shí)際DOM。

react-dom是react開發(fā)項(xiàng)目時需要使用的工具包，是一種針對dom的平臺實(shí)現(xiàn)，主要用于在web端進(jìn)行渲染。react-dom包提供了DOM特定的方法，可以在應(yīng)用程序的頂層使用，也可以作為React模型之外的特殊操作DOM的接口。

react-dom主要包含三個API：findDOMNode、unmountComponentAtNode 和 render。下面按觸發(fā)先后順序進(jìn)行介紹。

1、render

render用于將React渲染的虛擬DOM渲染到瀏覽器DOM，一般在頂層組件使用。該方法把元素掛載到 container 中，并且返回 element 的實(shí)例（即 refs 引用），如果是無狀態(tài)組件，render 會返回 null。當(dāng)組件裝載完畢時，callback 就會被調(diào)用。其語法為：

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

例如：

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的內(nèi)容
ReactDOM.render(
  <Provider store={store}>
    <Router/>
  </Provider>, document.getElementById('root'))

2、findDOMNode

findDOMNode用于獲取真正的DOM元素，以便對DOM節(jié)點(diǎn)進(jìn)行操作。

在此之前，首先要知道：在React中，虛擬DOM真正被添加到HTML中轉(zhuǎn)變?yōu)檎鎸?shí)DOM是在組件掛載（render()）后，故而我們可以在componentDidMount和componentDidUpdate這兩個方法中獲取。示例如下：

import { findDOMNode } from 'react-dom';
<Example ref={ node=>{ this.node = node} }> // 利用ref獲取Example組件的實(shí)例
const dom = findDOMNode(this.node); // 通過findDOMNode獲取實(shí)例對應(yīng)的真實(shí)DOM

注意：當(dāng)涉及復(fù)雜操作時，還有很多元素DOM API可用，然而DOM操作會對性能產(chǎn)生很大影響，所以，應(yīng)當(dāng)盡量減少DOM操作。

3、unmountComponentAtNode

unmountComponentAtNode用于執(zhí)行卸載操作，執(zhí)行在componentWillUnmount之前。

以上就是關(guān)于“react-dom的作用是什么”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。