React 是一個(gè)用於建立使用者介面的 Javascript 函式庫?，F(xiàn)在有兩件事很重要，一是Javascript函式庫，二是使用者介面。庫是一些程式碼的集合，我們可以重複使用它們來製作我們的應(yīng)用程式。透過使用 React 和一些程式碼集合，我們可以製作我們的 Web 應(yīng)用程式、行動(dòng)應(yīng)用程式、桌面應(yīng)用程式和使用者介面。

每當(dāng)我們談?wù)搼?yīng)用程式時(shí)，它基本上都有兩個(gè)部分。一個(gè)是前端（即使用者介面），另一個(gè)是後端，所有邏輯都駐留在其中。
前端是使用者互動(dòng)的部分，例如瀏覽、點(diǎn)擊按鈕、提交表單等。然後我們的前端用後端回應(yīng)它。
且後端包含許多複雜的邏輯和數(shù)據(jù)，如認(rèn)證、授權(quán)、數(shù)據(jù)操作等
但 React 根本不關(guān)心後端。 React 僅適用於使用者介面。

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

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

我們將透過一個(gè)小應(yīng)用程式看到。我們將建立一個(gè)小型計(jì)數(shù)器應(yīng)用程序，如下所示，一個(gè)簡單的 HTML 程式碼，其中包含兩個(gè)名為 counterNumber 和 button 的 id。

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

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

1.抓住元素並與它們合作是我們想要做的。
2.更新 UI（使用者介面）

那麼，這裡有什麼問題呢？程式碼正在運(yùn)行！但是，假設(shè)您需要兩個(gè)計(jì)數(shù)器應(yīng)用程式。那該怎麼辦？

您需要回到該 HTML 並取得新的 div，並使用新的 id 單獨(dú)取得它。那麼 UI 應(yīng)該會(huì)稍後更新。

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

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

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

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

在這裡，我只是將 React 與此連結(jié)連接起來，正如他們?cè)趓eact.org 網(wǎng)站上所說的那樣?，F(xiàn)在，如果我轉(zhuǎn)到react.js檔案並寫入console.log(React)和console.log(ReactDOM)，那麼我們可以在控制臺(tái)中看到2個(gè)對(duì)象，這意味著我們的React已連接。請(qǐng)注意，body 標(biāo)籤內(nèi)只有一個(gè)空的 div，只有一個(gè)名為 root 的 id。

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

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

要連接Babel，請(qǐng)?jiān)L問我們的網(wǎng)站>設(shè)定> 將此連結(jié)複製到我們輸入的HTML 和js 檔案的正文標(biāo)記下方=”text/babel” 那裡。

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

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

這個(gè) useState 將作為我們?cè)隽堪粹o的狀態(tài)。 UseState 預(yù)設(shè)為一個(gè)值，該值將顯示我們狀態(tài)的預(yù)設(shè)值，在本例中我們必須給出 0。 useState 函數(shù)基本上會(huì)傳回一個(gè)數(shù)組，其中包含兩件事 - 一個(gè)是我們給出的值，另一個(gè)是更新狀態(tài)值的函數(shù)?，F(xiàn)在我們透過解構(gòu)數(shù)組來分離它。

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

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

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

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

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

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

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

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

編碼快樂！

以上是什麼是 React 以及它是如何運(yùn)作的？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！