React 中的 DOM 是什麼？

---

DOM 代表“文件物件模型”。它是全球資訊網聯盟的基本邏輯主頁模型。

每次應用程式的 UI 狀態發生變化時，DOM 都會更新以反映該變化。每當應用程式使用者介面更新時，都會呈現 DOM，這最終會影響應用程式效能，導致載入速度變慢。

DOM 的複雜性和眾多 UI 元件進一步降低了效能，因為每次更改都需要重新呈現頁面。

但是，React 中的虛擬 DOM 概念改變了一切。讓我們在下面看看 -

什麼是 DOM？

換句話說，DOM 是網頁 UI 的樹狀結構表示，其所有元件和相關特性作為其分支。可以使用 DOM 的方言介面訪問和更新網站頁面上的任何元件的資料。

您建立的每個 HTML 片段都像樹枝一樣放置到樹上。使用 JavaScript，您可以訪問所有這些網路（HTML 元件）並修改其屬性、樣式和其他屬性。

這表明 JavaScript 可以快速獲取和更改網站，這要歸功於 DOM。因此，每棵樹中都必須存在一個根節點，對嗎？在這種情況下，節點是文件。您建立的每個 Html 元素都將直接或間接地成為根節點文件的後代。

React 中的 DOM 是什麼？

React 引入了虛擬 DOM 的概念，它充當真實 DOM 的輕量級副本。因此，對於真實 DOM 中存在的每個物件，React 虛擬 DOM 中都有一個物件。雖然它相同，但它無法以任何方式更改文件的設計。

DOM 操作需要時間，但虛擬 DOM 操作速度很快，因為沒有任何內容正在螢幕上獲取。因此，每當應用程式的狀態發生變化時，首先更新的是虛擬 DOM 而不是真實 DOM，這極大地提高了效能。

虛擬 DOM 如何在 React 中工作？

每當嚮應用程式中引入新內容時，就會形成一個虛擬 DOM，並且將其視覺化為樹。

這棵樹中的一個節點代表應用程式的每個元件。因此，每當任何元素的狀態發生變化時，就會構建一個新的虛擬 DOM 樹。

然後將以前的虛擬 DOM 樹與新建立的虛擬 DOM 樹進行比較，並記錄差異。然後確定對真實 DOM 進行這些更改的最佳方法。現在，只有更改的專案將呈現到頁面上。

重新整理 DOM

如果您熟悉 JavaScript，您可能會看到使用者使用“getElementByClass()”或“getElementById()”方法上傳 DOM 的元素。當應用程式的狀態發生變化時，DOM 會被修改以表示使用者介面的更改。

例如

JavaScript

// Simple getElementById() method document.getElementById('some−id').innerValue = 'updated value;

如前所述，將程式碼提交到 JavaScript 檔案或控制檯時，會存在這些事件 -

• 它刪除特定元素的子元件。

• 網站解碼 HTML

• 並將“更新的值”新增到元件（DOM）以查詢具有此標識的元件。

• 重新整理設計。

• 更新子節點和父節點的 CSS 值。

• 最後，遍歷樹，然後將其繪製到瀏覽器的視窗上。

因此，更改 DOM 不僅僅是更改內容。

ReactDOM

為了提供一種有效的方法來控制 Web 瀏覽器的 DOM 元件，ReactDOM 是一個提供 DOM 特定功能的庫，這些功能可以在 Web 應用程式的精英層使用。

• ReactDOM 使用度量並提供了一種有效的方法來操作 DOM。

• 如果提供的容器有任何後代，ReactDOM.render() 會替換它們。它具有非常有效的 diff 技術，並且可以更改特定的 DOM 子集。

• 伺服器端和客戶端都可以使用 ReactDOM。

• 功能性元素不能在 findDOMNode() 方法中部署，因為該操作僅在連線的元件上執行。

ReactDOM 的 API 中為開發人員提供了以下技術和其他一些技術。

• createPortal()

• hydrate()

• unmountComponentAtNode()

• findDOMNode()

• render()

您需要首先使用以下程式碼片段從 react-dom 模組匯入 ReactDOM，以便在 React Web 應用程式中使用 -

import * as ReactDOM from 'react−dom';

ReactDOM.createPortal(child, container)

此過程需要下面列出的兩個變數。

• container − 此選項預期元件的渲染容器。

• child − 此引數預期渲染 React 元素或 JSX 表示式。

此函式不產生任何內容。

ReactDOM.unmountComponentAtNode

此函式需要 Window DOM 中的 React 元素，並且僅接受一個引數，即元件。

• 返回型別 − 如果操作成功，它會發送此元件繪製到的 DOM 節點；否則，它會返回空。

• unmountComponentAtNode − 透過使用此函式，也可以解除安裝或刪除也顯示到特定框中的 React 元件。將警報元件視為一個示例。最好在相對較短的時間內刪除元件以提高網站效率。

findDOMNode()

此函式最常見的應用是查詢特定 React 元素呈現到的 DOM 節點。此技術很少使用，允許您透過為每個元素提供其引用屬性來實現相同的功能。

ReactDOM.render

此函式最多接受三個引數，如下所示。

• container − 此選項預期元素的渲染容器。

• element − 此引數預期渲染 React 元素或 JSX 表示式。

• callback − 此附加引數預期在渲染完成後執行函式。

• 返回型別 − 如果已渲染無根元件，則此函式將返回 null。否則，它會恢復到對元件的暗示。

DOM 元素

為了實現跨瀏覽器可訪問性和效率，React 開發了一個與瀏覽器無關的 DOM 框架。您利用此機會來平滑視窗中 DOM 實現的一些不規則邊界。

React 中的所有 DOM 屬性和特性，尤其是事件處理程式，都應使用駝峰命名法。例如，React bar Index 特性等效於 HTML tab index 屬性。

data-* 和 aria-* 屬性是唯一不需要小寫字母的屬性。您可以使用區域標籤作為區域標籤的示例。

總結

在 React 中，每當我們操作元素的虛擬 DOM 時，我們都會避免通常在實際 DOM 中遵循的一系列操作。

虛擬 DOM 是 React 用於提高應用程式速度的技術。它提供了一種確定兩棵渲染樹之間確切變化內容並僅更新真實 DOM 的必要部分的方法。