React 核心概念速覽

• React 是什麼？ React 是一個(gè)用於構(gòu)建快速、交互式用戶界面的流行且強(qiáng)大的 JavaScript 庫，它採用聲明式、組件化方法，高效地更新和渲染數(shù)據(jù)變化後的組件。
• 虛擬 DOM 的作用： React 的核心是虛擬 DOM，它是一個(gè)輕量級(jí)的 DOM 抽像模型。 React 利用虛擬 DOM 更新網(wǎng)頁，避免直接操作 DOM，從而提升性能。虛擬 DOM 通過比較前後差異，只更新實(shí)際改變的部分。
• React 的適用場景： React 非常適合需要快速響應(yīng)事件和頻繁數(shù)據(jù)變化的項(xiàng)目，尤其適用於需要與底層數(shù)據(jù)模型保持同步的複雜交互式 UI。它也有助於管理狀態(tài)組件並防止代碼混亂，因此非常適合需要大量狀態(tài)管理和 DOM 操作的項(xiàng)目。

現(xiàn)代用戶期望 Web 應(yīng)用擁有流暢的性能，體驗(yàn)如同原生應(yīng)用。雖然已經(jīng)有很多技術(shù)來減少網(wǎng)站首次加載時(shí)間，但在交互性強(qiáng)的 Web 應(yīng)用中，用戶操作與應(yīng)用響應(yīng)之間的時(shí)間延遲同樣至關(guān)重要。原生應(yīng)用反應(yīng)迅速，Web 應(yīng)用也應(yīng)該如此，即使在網(wǎng)絡(luò)連接不佳的情況下。

許多現(xiàn)代 JavaScript 框架有效地解決了這個(gè)問題。 React 可被認(rèn)為是創(chuàng)建快速、交互式 Web 應(yīng)用用戶界面的最流行和最強(qiáng)大的 JavaScript 庫之一。

本文將探討 React 的優(yōu)勢(shì)和工作機(jī)制，幫助您判斷它是否適合您的下一個(gè)項(xiàng)目。

什麼是 React？

React 是 Facebook 創(chuàng)建的一個(gè) JavaScript 庫，用於構(gòu)建用戶界面。

這是一個(gè)開源項(xiàng)目，在 GitHub 上擁有超過 74,000 個(gè)星標(biāo)。

React 的特點(diǎn)：

• 聲明式： 只需為應(yīng)用程序的每個(gè)狀態(tài)設(shè)計(jì)簡單的視圖，React 會(huì)在數(shù)據(jù)更改時(shí)高效地更新和渲染正確的組件。
• 組件化： 通過組裝多個(gè)封裝的組件來創(chuàng)建 React 應(yīng)用，每個(gè)組件管理自己的狀態(tài)。
• 一次學(xué)習(xí)，隨處編寫： React 不是一個(gè)完整的框架，它只是一個(gè)用於渲染視圖的庫。

虛擬 DOM 如何工作？

虛擬 DOM 是 React 快速渲染用戶界面元素及其更改的核心。讓我們更深入地了解其機(jī)制。

HTML 文檔對(duì)像模型 (DOM) 是：

HTML 和 XML 文檔的編程接口……DOM 提供了文檔的表示，作為一個(gè)結(jié)構(gòu)化的節(jié)點(diǎn)和對(duì)象組，具有屬性和方法。它本質(zhì)上將網(wǎng)頁連接到腳本或編程語言。 ——MDN

每當(dāng)您想以編程方式更改網(wǎng)頁的任何部分時(shí)，都需要修改 DOM。根據(jù)文檔的複雜性和大小，遍歷 DOM 並更新它可能需要比用戶所能接受的時(shí)間更長，尤其是在考慮瀏覽器在 DOM 發(fā)生更改時(shí)需要執(zhí)行的工作時(shí)。事實(shí)上，每次 DOM 更新時(shí)，瀏覽器都需要重新計(jì)算 CSS 並對(duì)網(wǎng)頁執(zhí)行佈局和重繪操作。

React 使開發(fā)人員無需直接處理 DOM 即可更改網(wǎng)頁。這是通過虛擬 DOM 實(shí)現(xiàn)的。

虛擬 DOM 是 DOM 的輕量級(jí)抽像模型。 React 使用 render 方法從 React 組件創(chuàng)建節(jié)點(diǎn)樹，並根據(jù)操作導(dǎo)致的數(shù)據(jù)模型更改更新此樹。

每次 React 應(yīng)用中的底層數(shù)據(jù)發(fā)生更改時(shí)，React 都會(huì)創(chuàng)建一個(gè)新的虛擬 DOM 表示來表示用戶界面。

使用虛擬 DOM 更新 UI 更改

在更新瀏覽器的 DOM 時(shí)，React 大致遵循以下步驟：

1. 每當(dāng)發(fā)生更改時(shí)，React 都會(huì)在虛擬 DOM 表示中重新渲染整個(gè) UI。
2. 然後，React 計(jì)算先前虛擬 DOM 表示與新表示之間的差異。
3. 最後，React 使用實(shí)際更改的內(nèi)容來修補(bǔ)真實(shí)的 DOM。如果沒有任何更改，React 完全不會(huì)處理 HTML DOM。

人們可能會(huì)認(rèn)為，這種涉及在內(nèi)存中保留虛擬 DOM 的兩個(gè)表示並進(jìn)行比較的過程，可能比直接處理實(shí)際 DOM 更慢。高效的 diff 算法、批量 DOM 讀/寫操作以及將 DOM 更改限制在必要的最小限度，使得使用 React 及其虛擬 DOM 成為構(gòu)建高性能應(yīng)用程序的絕佳選擇。

React 是否適合所有項(xiàng)目？

顧名思義，React 擅長創(chuàng)建超高響應(yīng)性的用戶界面——即非常快速地響應(yīng)事件和隨之而來的數(shù)據(jù)更改的用戶界面。 Facebook 工程師 Jordan Walke 對(duì) React 名稱的評(píng)論很有啟發(fā)性：

此 API 對(duì)任何狀態(tài)或?qū)傩愿淖龀龇磻?yīng)，並可處理任何形式的數(shù)據(jù)（結(jié)構(gòu)深度如同圖形本身），因此我認(rèn)為這個(gè)名稱很貼切。 ——Vjeux，“我們的前 50,000 個(gè)星標(biāo)”

雖然有些人認(rèn)為所有項(xiàng)目都需要 React，但我認(rèn)為可以說，對(duì)於需要將復(fù)雜的交互式 UI 與底層數(shù)據(jù)模型的頻繁更改保持同步的 Web 應(yīng)用，React 是一個(gè)不錯(cuò)的選擇。

React 旨在以高效的方式處理有狀態(tài)組件（這並不意味著開發(fā)人員不需要優(yōu)化他們的代碼）。因此，可以將受益於此功能的項(xiàng)目視為 React 的理想候選項(xiàng)目。

Chris Coyier 概述了以下相互關(guān)聯(lián)的情況，在這些情況下使用 React 是有意義的，我傾向於同意：

• 大量的狀態(tài)管理和 DOM 操作。也就是說，啟用和禁用按鈕、激活鏈接、更改輸入值、關(guān)閉和展開菜單等。在這種項(xiàng)目中，React 使管理有狀態(tài)組件更快更容易。正如 React Router 的共同作者 Michael Jackson 在一條推文中恰當(dāng)?shù)厮f：>關(guān)鍵是，React 負(fù)責(zé)弄清楚實(shí)際上需要對(duì) DOM 進(jìn)行哪些更改的難題，而不是我。這是*非常寶貴的*
• 避免代碼混亂。通過直接修改 DOM 來跟蹤複雜的狀態(tài)可能會(huì)導(dǎo)致代碼混亂，至少如果不特別注意代碼組織和結(jié)構(gòu)的話。

資源

如果您好奇 React 及其虛擬 DOM 的工作原理，以下是一些您可以了解更多信息的資源：

• 使用 SitePoint 的綜合 React 中心學(xué)習(xí) React。
• 來自 Facebook 工程師的 React 視頻
• Chris Minnick 的“React.js 中虛擬 DOM 的真正好處”
• Bartosz Krajka 的“虛擬 DOM 與 DOM 之間的區(qū)別”
• Fran?ois Zaninotto 的“React 速度慢，React 速度快：在實(shí)踐中優(yōu)化 React 應(yīng)用”
• Chris Lienert 的“如何為您的公司選擇合適的前端框架”

結(jié)論

React 和其他類似的 JavaScript 庫簡化了快速、事件驅(qū)動(dòng)的用戶界面的開發(fā)，這些界面可以快速響應(yīng)狀態(tài)更改?？梢宰R(shí)別出一個(gè)潛在的目標(biāo)，即希望彌合 Web 應(yīng)用和原生應(yīng)用之間的差距：用戶期望 Web 應(yīng)用像原生應(yīng)用一樣流暢無縫。

這是現(xiàn)代 Web 開發(fā)的發(fā)展方向。 Create React App（一個(gè)無需配置即可創(chuàng)建 React 應(yīng)用的項(xiàng)目）的最新更新默認(rèn)包含創(chuàng)建漸進(jìn)式 Web 應(yīng)用 (PWA) 的功能，這並非偶然。這些應(yīng)用利用服務(wù)工作者和離線優(yōu)先緩存來最大限度地減少延遲並使 Web 應(yīng)用能夠離線工作。

關(guān)於 React 虛擬 DOM 的常見問題

• 什麼是 React 中的虛擬 DOM？ 虛擬 DOM (VDOM) 是一種編程概念，其中 UI 的理想或“虛擬”表示保存在內(nèi)存中，並由諸如 ReactDOM 之類的庫與“真實(shí)”DOM 同步。此過程稱為協(xié)調(diào)。在 React 中，當(dāng)您渲染 JSX 元素時(shí)，每個(gè)虛擬 DOM 對(duì)像都會(huì)被更新。

• 虛擬 DOM 如何工作？ 虛擬 DOM 分三個(gè)簡單的步驟工作。首先，每當(dāng)任何底層數(shù)據(jù)發(fā)生更改時(shí)，整個(gè) UI 都會(huì)在虛擬 DOM 表示中重新渲染。然後，計(jì)算先前 DOM 表示與新表示之間的差異。最後，真實(shí)的 DOM 只會(huì)更新實(shí)際更改的內(nèi)容。這比每次更改都更新整個(gè) DOM 更有效，並提高了性能。

• React 的虛擬 DOM 如何提高性能？ React 的虛擬 DOM 通過最大限度地減少直接操作 DOM 的次數(shù)來提高性能，而直接操作 DOM 在任何瀏覽器中都是一項(xiàng)緩慢的操作。 React 不是每次發(fā)生更改時(shí)都更新整個(gè) DOM，而是只更新需要更新的 DOM 部分。這導(dǎo)致性能顯著提升。

• 真實(shí) DOM 與虛擬 DOM 之間的區(qū)別是什麼？ 真實(shí) DOM 是瀏覽器中網(wǎng)頁的實(shí)際表示，而虛擬 DOM 是內(nèi)存中網(wǎng)頁的虛擬表示。虛擬 DOM 更快、更高效，因?yàn)樗桓乱迅牡恼鎸?shí) DOM 部分，而不是每次發(fā)生更改時(shí)都更新整個(gè) DOM。

• React 中的 JSX 是什麼？ JSX 代表 JavaScript XML。它是 JavaScript 的語法擴(kuò)展，由 Facebook 開發(fā)，允許在 JavaScript 中存在類似 HTML/XML 的文本。您可以在包含 JavaScript 代碼的同一文件中編寫 HTML 結(jié)構(gòu)。

• React 如何使用 JSX？ React 使用 JSX 在 DOM 上渲染元素。 JSX 允許我們?cè)?JavaScript 中編寫 HTML 元素並將它們放在 DOM 中，而無需任何 createElement() 和/或 appendChild() 方法。 JSX 將 HTML 標(biāo)記轉(zhuǎn)換為 React 元素，並使在 React 中編寫和添加 HTML 更加容易。

• React 中的協(xié)調(diào)是什麼？ 協(xié)調(diào)是 React 更新 DOM 的過程。當(dāng)組件的狀態(tài)發(fā)生變化時(shí)，React 需要確定是否需要實(shí)際的 DOM 更新。它通過創(chuàng)建一個(gè)新的虛擬 DOM 並將其與舊的虛擬 DOM 進(jìn)行比較來實(shí)現(xiàn)此目的。只有在存在差異的地方，React 才會(huì)更新真實(shí)的 DOM。

• React 如何處理事件？ React 創(chuàng)建了自己的事件系統(tǒng)，它與 W3C 對(duì)像模型完全兼容。 React 實(shí)現(xiàn)了一個(gè)合成事件系統(tǒng)，為 React 應(yīng)用程序和界面帶來一致性和高性能。它通過將事件委派給文檔的根元素，然後將它們映射回相應(yīng)的組件元素來實(shí)現(xiàn)這一點(diǎn)。

• 組件在 React 中的作用是什麼？ 組件是任何 React 應(yīng)用程序的構(gòu)建塊，單個(gè)應(yīng)用程序通常由多個(gè)組件組成。組件本質(zhì)上是用戶界面的一部分。它將 UI 分割成獨(dú)立的、可重用的部分，這些部分可以單獨(dú)處理。

• React 如何處理表單？ 在 HTML 中，表單元素（如 、 和 ）通常維護(hù)自己的狀態(tài)，並根據(jù)用戶輸入更新它。在 React 中，可變狀態(tài)通常保存在組件的 state 屬性中，並且只使用 setState() 進(jìn)行更新。 React 的表單處理方式略有不同，但允許對(duì)錶單及其數(shù)據(jù)進(jìn)行更精細(xì)的控制。

以上是如何判斷React是否最適合您的下一個(gè)項(xiàng)目的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！