React 核心概念速覽

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

現(xiàn)代用戶期望 Web 應(yīng)用擁有流暢的性能，體驗(yàn)如同原生應(yīng)用。雖然已經(jīng)有很多技術(shù)來(lái)減少網(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è)問(wèn)題。React 可被認(rèn)為是創(chuàng)建快速、交互式 Web 應(yīng)用用戶界面的最流行和最強(qiáng)大的 JavaScript 庫(kù)之一。

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

什么是 React？

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

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

React 的特點(diǎn)：

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

虛擬 DOM 如何工作？

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

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

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

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

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

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

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

使用虛擬 DOM 更新 UI 更改

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

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

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

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

顧名思義，React 擅長(zhǎng)創(chuàng)建超高響應(yīng)性的用戶界面——即非?？焖俚仨憫?yīng)事件和隨之而來(lái)的數(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)為可以說(shuō)，對(duì)于需要將復(fù)雜的交互式 UI 與底層數(shù)據(jù)模型的頻繁更改保持同步的 Web 應(yīng)用，React 是一個(gè)不錯(cuò)的選擇。

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

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

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

資源

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

• 使用 SitePoint 的綜合 React 中心學(xué)習(xí) React。
• 來(lái)自 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 庫(kù)簡(jiǎn)化了快速、事件驅(qū)動(dòng)的用戶界面的開(kāi)發(fā)，這些界面可以快速響應(yīng)狀態(tài)更改。可以識(shí)別出一個(gè)潛在的目標(biāo)，即希望彌合 Web 應(yīng)用和原生應(yīng)用之間的差距：用戶期望 Web 應(yīng)用像原生應(yīng)用一樣流暢無(wú)縫。

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

關(guān)于 React 虛擬 DOM 的常見(jiàn)問(wèn)題

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

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

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

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

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

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

• React 中的協(xié)調(diào)是什么？ 協(xié)調(diào)是 React 更新 DOM 的過(guò)程。當(dāng)組件的狀態(tài)發(fā)生變化時(shí)，React 需要確定是否需要實(shí)際的 DOM 更新。它通過(guò)創(chuàng)建一個(gè)新的虛擬 DOM 并將其與舊的虛擬 DOM 進(jìn)行比較來(lái)實(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)用程序和界面帶來(lái)一致性和高性能。它通過(guò)將事件委派給文檔的根元素，然后將它們映射回相應(yīng)的組件元素來(lái)實(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)文章！