react-dom有什麼作用

「react-dom」的作用是將虛擬DOM渲染到文件中變成實際DOM；「react-dom」是react開發專案時需要使用的工具包，提供了DOM特定的方法，可以在應用程式的頂層使用，也可以作為React模型以外的特殊操作DOM的介面。

本教學操作環境：Windows10系統、react17.0.1版、Dell G3電腦。

react-dom有什麼作用

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

react的核心思想是虛擬DOM，react包含了產生虛擬DOM的函數react.createElement，以及Component類別。當我們自己封裝元件時，就需要繼承Component類，才能使用生命週期函數等。而react-dom套件的核心功能就是把這些虛擬DOM渲染到文件中變成實際DOM。

react-dom是react開發專案時需要使用的工具包，是一種針對dom的平台實現，主要用於在web端進行渲染。 react-dom套件提供了DOM特定的方法，可以在應用程式的頂層使用，也可以作為React模型之外的特殊操作DOM的介面。

react-dom主要包含三個API：findDOMNode、unmountComponentAtNode 和 render。下面按觸發先後順序進行介紹。

1、render

render用於將React渲染的虛擬DOM渲染到瀏覽器DOM，一般在頂層元件使用。這個方法把元素掛載到 container 中，並且傳回 element 的實例（即 refs 引用），如果是無狀態元件，render 會傳回 null。當元件裝載完畢時，callback 就會被呼叫。其語法為：

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的内容
ReactDOM.render(
  <Provider store={store}>
    <Router/>
  </Provider>, document.getElementById(&#39;root&#39;))

2、findDOMNode

findDOMNode用於取得真正的DOM元素，以便對DOM節點進行操作。

在此之前，首先要知道：在React中，虛擬DOM真正被添加到HTML中轉變為真實DOM是在組件掛載（render()）後，故而我們可以在componentDidMount和componentDidUpdate這兩個方法中獲取。範例如下：

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

注意：當涉及複雜操作時，還有很多元素DOM API可用，然而DOM操作會對效能產生很大影響，所以，應盡量減少DOM操作。

3、unmountComponentAtNode

unmountComponentAtNode用於執行卸載操作，執行在componentWillUnmount之前。

推薦學習：《react影片教學》

以上是react-dom有什麼作用的詳細內容。更多資訊請關注PHP中文網其他相關文章！