React 是一個用於建立使用者介面的 Javascript 函式庫。現在有兩件事很重要，一是Javascript函式庫，二是使用者介面。庫是一些程式碼的集合，我們可以重複使用它們來製作我們的應用程式。透過使用 React 和一些程式碼集合，我們可以製作我們的 Web 應用程式、行動應用程式、桌面應用程式和使用者介面。
每當我們談論應用程式時，它基本上都有兩個部分。一個是前端（即使用者介面），另一個是後端，所有邏輯都駐留在其中。
前端是使用者互動的部分，例如瀏覽、點擊按鈕、提交表單等。然後我們的前端用後端回應它。
且後端包含許多複雜的邏輯和數據，如認證、授權、數據操作等
但 React 根本不關心後端。 React 僅適用於使用者介面。
現在，如果我們談論網絡，我們知道 Javascript 是瀏覽器的預設程式語言。但 React 不是一種程式語言，它只是一個 Javascript 函式庫。
這意味著，我們在 React 中所做的一切最終只不過是純粹的普通 Javascript。
好吧，我問你一個問題。 React 是 2013 年出現的兄弟，那我們之前不是就已經做了使用者介面了嗎？
是的，我們之前已經使用純 Javascript 和 jQuery 完成了此操作。
現在的問題是，為什麼React又來了？ Javascript 會出現什麼問題？
為了理解 React 真正要解決什麼問題，我們需要更深入地挖掘。讓我們深入探討一下...！
我們將透過一個小應用程式看到。我們將建立一個小型計數器應用程序，如下所示，一個簡單的 HTML 程式碼，其中包含兩個名為 counterNumber 和 button 的 id。
現在看一下JavaScript程式碼圖像，有一個簡單的程式碼。我不想向你解釋這段程式碼。請注意我的意思。
選擇counterNumber和button作為DOM元素，然後使用addEventListener將計數值加1。然後在那裡更新 counterNumberEl 的值。這裡究竟發生了什麼事？如果你仔細看的話，你會明白基本上有兩個功能：
1.抓住元素並與它們合作是我們想要做的。
2.更新 UI（使用者介面）
那麼，這裡有什麼問題呢？程式碼正在運行！但是，假設您需要兩個計數器應用程式。那該怎麼辦？
您需要回到該 HTML 並取得新的 div，並使用新的 id 單獨取得它。那麼 UI 應該會稍後更新。
現在，我只討論兩個計數器應用程序，但是當互動過多且 UI 複雜時，開發人員會不知所措。這是主要問題！你一方面創建功能，另一方面更新 UI，這變得非常痛苦。
當像 Facebook 這樣的公司面臨這個巨大問題時，Facebook 軟體工程師 Jordan Walke 受到 PHP 的基於組件的框架 XHP-js 的啟發，於 2011 年創建了 React.js。它於 2011 年首次在 Facebook 的動態中實現，並於 2012 年在 Instagram 中使用。 2013 年開源 React.js。
現在我們知道為什麼要使用 React 了。因此，讓我們現在使用 React 來完成我們使用 vanilla JS 所做的計數器應用程式。然後你會更有信心，相信 React 之後開發人員的生活變得多麼輕鬆。讓我們來看程式碼...
首先，我將向您展示如何安裝 React，以方便您使用，但在我們的專案中沒有人以這種方式使用 React。我這樣展示只是為了方便理解，讓大家從核心層面理解。
在這裡，我只是將 React 與此連結連接起來，正如他們在react.org 網站上所說的那樣。現在，如果我轉到react.js檔案並寫入console.log(React)和console.log(ReactDOM)，那麼我們可以在控制台中看到2個對象，這意味著我們的React已連接。請注意，body 標籤內只有一個空的 div，只有一個名為 root 的 id。
在 JavaScript 中，我們可以像最初使用選擇器一樣在 DOM 中建立元素。類似地，我們也可以在 React 中建立元素。這裡創建了一個div，裡面列印了帶有p標籤的Hello World。雖然目前這似乎不是問題，但當您創建太多元素時，生活就結束了！一遍又一遍地做同樣的事情是一個問題。這就是 React 創建自己的標記，稱為 JSX (JavaScript XML) 的原因。雖然看起來像 HTML，但實際上是 JSX。
上圖是這樣寫的。但問題是，瀏覽器無法理解這個 JSX。因此，為了解決這個問題，我們的轉譯器 Babel 誕生了，它會將我們的 JSX 轉譯為瀏覽器能夠理解的普通 JS。
要連接Babel，請訪問我們的網站>設定> 將此連結複製到我們輸入的HTML 和js 檔案的正文標記下方=”text/babel” 那裡。
現在既然是 JSX，我們就可以在這裡編寫我們想要的任何 JavaScript。那麼讓我們來簡化一下這個語法。首先我們將其放入 JS 函數中。
這裡注意，myElement 皮重我只是放入了一個名為 Increment 的函數，並且像這樣製作 Increment 函數使得在 React 中編寫起來更加容易。現在我們可以在這裡編寫 JS，如果我們在這裡使用之前的 JS 程式碼，那就可以了。但 React 表示，如果你想像我一樣管理狀態，你不必考慮 UI 更新。所以在 React 中他們提供了一個名為 useState 的函數，我正在展示如何使用它。
這個 useState 將作為我們增量按鈕的狀態。 UseState 預設為一個值，該值將顯示我們狀態的預設值，在本例中我們必須給出 0。 useState 函數基本上會傳回一個數組，其中包含兩件事 - 一個是我們給出的值，另一個是更新狀態值的函數。現在我們透過解構數組來分離它。
現在，如果我們想要 counter 作為我們的初始值，現在返回後我們可以像這樣給出 {counter} 而不是 0。這稱為插值。現在計數器的值將會動態變化。而按鈕中的onClick（因為是JSX，所以應該像onClick一樣按照駝峰式寫法）應該被稱為功能。
如果我這樣給它，那麼就完成了，但是這裡有一個問題。如果我像這樣調用 setCounter 函數，它將已經被調用，這是我們不希望的。我們希望當有人點擊按鈕時按鈕的值會增加。所以我們需要製作一個匿名箭頭函數，那麼問題就解決了。
現在如果你注意到這裡我們沒有透過抓取 DOM 的任何元素來手動更新 UI，這裡我們只是告訴 React 我們想要什麼，其餘的 React 更新了 UI 本身。
現在，當我們給出 JS 範例時，我們在 JS 方面遇到的主要問題是——必須手動更新 UI。如果我們想再次使用該應用程序，我們必須一次又一次地做同樣的事情。
但是 React 解決了這兩個問題。我們已經了解了 React 在無需手動更新 UI 的情況下如何工作，現在我們將了解如果我們需要在 2-3 個地方使用此應用程序，React 如何幫助我們。
看這裡，我只是>在此，我呼叫增量函數兩次，工作完成。現在最有趣的是，您可以單獨運行 2 個應用程序，這意味著它們將單獨管理狀態。我的意思是你明白，如果你願意，你可以在整個網站的任何地方使用它，但不同的地方也會有所不同，這意味著一個地方與另一個地方沒有關係。這就是Reactjs的力量。
基本上，你告訴 React 你的功能是什麼，React 會相應地自動更新 UI。這就是 ReactJS 的美妙之處。
那我們在談論 React 什麼呢？我們為什麼要使用 React？現在我完全明白 React 來解決什麼問題了。這樣的問題再也不會阻礙你在面試中的表現了。兄弟，要這麼有耐心地讀完，可不是一件容易的事。你已經做到了，祝你好運。編碼快樂！
以上是什麼是 React 以及它是如何運作的？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
