ReactDOM 包及其用途
![ReactDOM 包及其用途](/img/React/ag-feature-image---reactdom.webp)
每個 React 開發人員都有使用外部庫的獨特方法。有些人試圖將它們的使用限制在核心要素上,而另一些人則幾乎所有東西都使用外部庫。
在今天的文章中,我們將討論 React 的基本庫之一,稱為 ReactDOM
。這個包提供了在 React 應用程式中管理 DOM 渲染的必要方法。
React 中的 ReactDOM
包
結合通用的 React 庫,這個包是在 React 中構建動態應用程式所必需的。它提供了一個至關重要的 render()
函式,這是任何類元件的基本構建塊。
一般來說,這個包提供了與 DOM 互動的方法,使我們能夠有效地管理應用程式 DOM。以下是 ReactDOM
包中包含的最基本方法的列表:
Render()
findDOMNode()
unmountComponentAtNode()
hydrate()
createPortal()
什麼是 DOM 和虛擬 DOM
本質上,DOM(文件物件模型的縮寫)是將網頁表示為物件。它提供了一個 API 來訪問、讀取或改變頁面的內容。
在 React 流行之前,JavaScript 開發人員使用諸如 jQuery
之類的庫來直接更改 DOM。手動 DOM 操作效率低下,因為瀏覽器會重新渲染整個頁面,即使對 DOM 的更改幾乎看不到。
React 之所以受歡迎,是因為它提供了一個虛擬 DOM,即 DOM 的任意副本,它可以跟蹤更改並一次更新實際 DOM。
這種方法效率更高,因此 Virtual DOM 至今仍是 React 的核心功能之一。ReactDOM
庫包含在 React 中與 DOM 互動的基本功能。
在 React 中安裝 ReactDOM
過去,ReactDOM
方法包含在泛型包中,但現在我們必須單獨匯入它們。首先,你必須選擇應用程式目錄並通過在命令列中輸入以下內容來安裝包:
npm install react-dom
然後就可以匯入了。如果你使用的是現代版本的 JavaScript,你可以使用 import
語句來做到這一點:
import ReactDOM from 'react-dom'
或者,如果你只需要匯入一個 render
方法,你可以像這樣匯入它:
import { render } from 'react-dom'
你可以使用以下模式匯入任何其他特定方法。
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn