ReactDOM 包及其用途

Irakli Tchigladze 2022年5月18日
ReactDOM 包及其用途

每個 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 Tchigladze avatar Irakli Tchigladze avatar

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

相關文章 - React ReactDOM