React 是一個用于構(gòu)建用戶界面的 Javascript 庫?，F(xiàn)在有兩件事很重要，一是Javascript庫，二是用戶界面。庫是一些代碼的集合，我們可以重用它們來制作我們的應(yīng)用程序。通過使用 React 和一些代碼集合，我們可以制作我們的 Web 應(yīng)用程序、移動應(yīng)用程序、桌面應(yīng)用程序和用戶界面。

每當(dāng)我們談?wù)搼?yīng)用程序時，它基本上都有兩個部分。一個是前端（即用戶界面），另一個是后端，所有邏輯都駐留在其中。
前端是用戶交互的部分，比如瀏覽、點擊按鈕、提交表單等。然后我們的前端用后端響應(yīng)它。
并且后端包含很多復(fù)雜的邏輯和數(shù)據(jù)，比如認(rèn)證、授權(quán)、數(shù)據(jù)操作等
但 React 根本不關(guān)心后端。 React 僅適用于用戶界面。

現(xiàn)在，如果我們談?wù)摼W(wǎng)絡(luò)，我們知道 Javascript 是瀏覽器的默認(rèn)編程語言。但 React 不是一種編程語言，它只是一個 Javascript 庫。
這意味著，我們在 React 中所做的一切最終只不過是純粹的普通 Javascript。

好吧，我問你一個問題。 React 是 2013 年出現(xiàn)的兄弟，那我們之前不是就已經(jīng)做了用戶界面了嗎？
是的，我們之前已經(jīng)使用純 Javascript 和 jQuery 完成了此操作。
現(xiàn)在的問題是，為什么React又來了？ Javascript 會出現(xiàn)什么問題？
為了理解 React 真正要解決什么問題，我們需要更深入地挖掘。讓我們深入探討一下...！

我們將通過一個小應(yīng)用程序看到。我們將創(chuàng)建一個小型計數(shù)器應(yīng)用程序，如下所示，一個簡單的 HTML 代碼，其中包含兩個名為 counterNumber 和 button 的 id。

現(xiàn)在看一下JavaScript代碼圖像，有一個簡單的代碼。我不想向你解釋這段代碼。請注意我的意思。

選擇counterNumber和button作為DOM元素，然后使用addEventListener將計數(shù)值加1。然后在那里更新 counterNumberEl 的值。這里究竟發(fā)生了什么？如果你仔細(xì)看的話，你會明白基本上有兩個功能：

1.抓住元素并與它們合作是我們想要做的。
2.更新 UI（用戶界面）

那么，這里有什么問題呢？代碼正在運行！但是，假設(shè)您需要兩個計數(shù)器應(yīng)用程序。那該怎么辦？

您需要返回到該 HTML 并獲取一個新的 div，并使用新的 id 單獨獲取它。那么 UI 應(yīng)該稍后更新。

現(xiàn)在，我只討論兩個計數(shù)器應(yīng)用程序，但是當(dāng)交互過多且 UI 復(fù)雜時，開發(fā)人員會不知所措。這是主要問題！你一方面創(chuàng)建功能，另一方面更新 UI，這變得非常痛苦。

當(dāng)像 Facebook 這樣的公司面臨這個巨大問題時，F(xiàn)acebook 軟件工程師 Jordan Walke 受到 PHP 的基于組件的框架 XHP-js 的啟發(fā)，于 2011 年創(chuàng)建了 React.js。它于 2011 年首次在 Facebook 的新聞源中實現(xiàn)，并于 2012 年在 Instagram 中使用。 2013 年開源 React.js。

現(xiàn)在我們知道為什么要使用 React 了。因此，讓我們現(xiàn)在使用 React 來完成我們使用 vanilla JS 所做的計數(shù)器應(yīng)用程序。然后你就會更有信心，相信 React 之后開發(fā)人員的生活變得多么輕松。讓我們看代碼...

首先，我將向您展示如何安裝 React，以方便您使用，但在我們的項目中沒有人以這種方式使用 React。我這樣展示只是為了方便理解，讓大家從核心層面理解。

在這里，我只是將 React 與此鏈接連接起來，正如他們在react.org 網(wǎng)站上所說的那樣?，F(xiàn)在，如果我轉(zhuǎn)到react.js文件并寫入console.log(React)和console.log(ReactDOM)，那么我們可以在控制臺中看到2個對象，這意味著我們的React已連接。注意，body 標(biāo)簽內(nèi)只有一個空的 div，只有一個名為 root 的 id。

在 JavaScript 中，我們可以像最初使用選擇器一樣在 DOM 中創(chuàng)建元素。類似地，我們也可以在 React 中創(chuàng)建元素。這里創(chuàng)建了一個div，里面打印了帶有p標(biāo)簽的Hello World。雖然目前這似乎不是問題，但當(dāng)您創(chuàng)建太多元素時，生活就結(jié)束了！一遍又一遍地做同樣的事情是一個問題。這就是 React 創(chuàng)建自己的標(biāo)記，稱為 JSX (JavaScript XML) 的原因。雖然看起來像 HTML，但實際上是 JSX。

上圖中是這樣寫的。但問題是，瀏覽器無法理解這個 JSX。因此，為了解決這個問題，我們的轉(zhuǎn)譯器 Babel 誕生了，它會將我們的 JSX 轉(zhuǎn)譯為瀏覽器能夠理解的普通 JS。

要連接 Babel，請訪問我們的網(wǎng)站 >設(shè)置> 將此鏈接復(fù)制到我們輸入的 HTML 和 js 文件的正文標(biāo)記下方=”text/babel” 那里。

現(xiàn)在既然是 JSX，我們就可以在這里編寫我們想要的任何 JavaScript。那么讓我們簡化一下這個語法。首先我們將其放入 JS 函數(shù)中。

這里注意，myElement 皮重我只是放入了一個名為 Increment 的函數(shù)，并且像這樣制作 Increment 函數(shù)使得在 React 中編寫起來更加容易?，F(xiàn)在我們可以在這里編寫 JS，如果我們在這里使用之前的 JS 代碼，那就可以了。但 React 表示，如果你想像我一樣管理狀態(tài)，則不必考慮 UI 更新。所以在 React 中他們提供了一個名為 useState 的函數(shù)，我正在展示如何使用它。

這個 useState 將作為我們增量按鈕的狀態(tài)。 UseState 默認(rèn)為一個值，該值將顯示我們狀態(tài)的默認(rèn)值，在本例中我們必須給出 0。 useState 函數(shù)基本上返回一個數(shù)組，其中包含兩件事 - 一個是我們給出的值，另一個是更新狀態(tài)值的函數(shù)?，F(xiàn)在我們通過解構(gòu)數(shù)組來分離它。

現(xiàn)在，如果我們想要 counter 作為我們的初始值，現(xiàn)在返回后我們可以像這樣給出 {counter} 而不是 0。這稱為插值?，F(xiàn)在計數(shù)器的值將動態(tài)變化。而按鈕中的onClick（因為是JSX，所以應(yīng)該像onClick一樣按照駝峰式寫法）應(yīng)該被稱為功能。

如果我這樣給它，那么就完成了，但是這里有一個問題。如果我像這樣調(diào)用 setCounter 函數(shù)，它將已經(jīng)被調(diào)用，這是我們不希望的。我們希望當(dāng)有人點擊按鈕時按鈕的值會增加。所以我們需要制作一個匿名箭頭函數(shù)，那么問題就解決了。

現(xiàn)在如果你注意到這里我們沒有通過抓取 DOM 的任何元素來手動更新 UI，這里我們只是告訴 React 我們想要什么，其余的 React 更新了 UI 本身。

現(xiàn)在，當(dāng)我們給出 JS 示例時，我們在 JS 方面遇到的主要問題是——必須手動更新 UI。如果我們想再次使用該應(yīng)用程序，我們就必須一次又一次地做同樣的事情。

但是 React 解決了這兩個問題。我們已經(jīng)了解了 React 在無需手動更新 UI 的情況下如何工作，現(xiàn)在我們將了解如果我們需要在 2-3 個地方使用此應(yīng)用程序，React 如何幫助我們。

看這里，我只是<>在此，我調(diào)用增量函數(shù)兩次，工作完成。現(xiàn)在最有趣的是，您可以單獨運行 2 個應(yīng)用程序，這意味著它們將單獨管理狀態(tài)。我的意思是你明白，如果你愿意，你可以在整個網(wǎng)站的任何地方使用它，但不同的地方也會有所不同，這意味著一個地方與另一個地方?jīng)]有關(guān)系。這就是Reactjs的力量。

基本上，你告訴 React 你的功能是什么，React 會相應(yīng)地自動更新 UI。這就是 ReactJS 的美妙之處。

那么我們在談?wù)?React 什么呢？我們?yōu)槭裁词褂?React？現(xiàn)在我完全明白 React 來解決什么問題了。這樣的問題再也不會阻礙你在面試中的表現(xiàn)了。兄弟，要這么耐心地讀完，可不是一件容易的事。你已經(jīng)做到了，祝你好運。

編碼快樂！

以上是什么是 React 以及它是如何工作的？的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！