React如此受歡迎離不開這4個主要原則

語言: CN / TW / HK
時間 2022-09-26 18:07:47
主題:

在看似無窮無盡的JavaScript前端框架和庫中，有一個庫（可以說）佔據了至高無上的地位，那個庫就是React。但是為什麼React年復一年地如此受歡迎呢？在我們深入研究使它如此受歡迎的React原理之前，首先需要了解是什麼導致了React的起源以及它旨在解決什麼問題。

React的起源

從90年代到21世紀初，前端Web開發與現在不同。它的使用者介面少得多，也不像今天的網站那樣具有互動性。在jQuery出現之前，沒有統一的方式來工作和操作DOM（文件物件模型），jQuery是第一個為開發人員建立統一的方式來使用DOM而不必擔心開發人員當時面臨的跨瀏覽器相容性問題的API。這很棒，隨著網站變得越來越大，backbone.js等其他框架允許操作DOM變得越來越容易。

單頁應用程式（SPA）的誕生

隨著前端開發變得越來越容易。網路開發開始發生轉變，每次我們想顯示不同的內容時，我們不需要總是從伺服器獲取應用程式程式碼，取而代之的是，現在更多的應用程式正在操縱JavaScript來顯示新內容，而無需與伺服器通訊。這意味著我們將更少地依賴超文字標記語言，而更多地依賴JavaScript。隨著受歡迎程度的提高，谷歌開發了一個名為AngularJS的框架，以進一步提高開發SPA的效率。

Facebook問題

儘管當時人們注意到隨著應用程式的擴充套件和前端變得越來越複雜，開發人員很難除錯他們的程式碼並弄清楚資料是如何流動的。對於臉譜網及其臉譜網廣告應用程式來說尤其如此。儘管他們沒有使用AnGuardiJS，臉譜網廣告團隊意識到，隨著越來越多的人加入開發團隊，他們的程式碼庫也在增加，工程師和開發人員跟不上，他們意識到他們需要一個最適合他們應用程式的更好的架構。

React解決方案

為了解決臉譜網面臨的問題，2013年臉譜網釋出了一個非常適合他們的庫，叫做React。一年後，谷歌意識到AngularJS的架構使得開發人員很難大規模地建立好的應用程式，所以他們正在建立一個名為Angular的重拍。隨著React的出現，許多人轉向使用React建立應用程式，反過來，自從大型科技公司開始使用React以來，React的受歡迎程度飆升。

React的4個原則

隨著React的出現，有4個關鍵原則導致了它的持續成功。這4個是

1. 宣告式與命令式方法

在 React 之前，當開發人員與 DOM 互動時，他們要麼使用庫，要麼手動更改 DOM 的各個部分以響應各種使用者事件。這種思維方式被認為是必要的。例如：

在上面的示例中，我們迴圈遍歷listOfNumbersand 在每次迭代期間，我們將當前數字新增到newList乘以 10 的末尾。解釋每個步驟以實現結果的過程是命令式思維方式的簡單示例。另一方面，以下是宣告式程式設計的示例：

在上面的示例中，這是宣告性的，因為我們沒有展示如何製作列表的每個步驟，而是通過使用map()為我們完成工作的函式來抽象出一些功能。這很棒，因為它允許我們在擴充套件時更輕鬆地除錯程式碼。

當涉及到 React 時，當我們操作 DOM 而不是以命令式的方式進行操作時，我們使用 JavaScript 來顯示響應事件的每個步驟。現在，我們可以改為向 React 顯示我們應用的狀態，並且 React 會以它知道的最佳方式呈現應用。這就是“React”這個名字的由來，因為它會在狀態變化時做出反應！

2. 元件架構

第二個原則是 React 的架構基於可重用元件。這會將我們的 Web 應用程式分解為樂高積木，我們可以將它們拆開或切換到其他樂高積木。例如：

當你使用 React 建立一個網站時，它的第二個原則是你想讓你的元件儘可能地可重用，這樣如果你要製作一個導航欄。導航欄本身將是它自己的元件，可以潛在地用於其他專案以及與其他人共享。與頁尾甚至按鈕元件類似。

3.單向資料流

第三個原則指出資料從父元件單向傳輸到子元件。以下是它可能採取的步驟示例：

  1. 父元件將 state 的資料以 props 的形式傳遞給子元件，如果它們有的話。
  2. 子元件返回當前狀態的使用者介面表示或繼續將資料傳遞給降序的子元件。
  3. React 呈現整個狀態的 UI。
  4. 如果使用者引發事件。狀態將更新，導致事件再次觸發並 React 重新渲染。

這很好的原因是它允許程式碼隨著應用程式的擴充套件而更易於維護。當我們在元件中出現錯誤時，我們知道我們可以檢視元件的位置，然後在那裡糾正該錯誤，而不必懷疑它是否是由於元件範圍之外的資料造成的。

4. 使用者介面庫

最後一個原則是，React 歸根結底是一個 UI 庫，它只是使用者與前端應用程式互動的一種方式。它在如何構建應用程式方面沒有像框架那樣嚴格的結構。思考 React 的一個好方法是，與框架相比，它就像一個烤箱，而框架就像一個為您提供所有工具的廚房。React 允許廚師和開發人員選擇他們自己的工具來製作他們的應用程式。React 可用於網路、移動裝置，甚至用於開發虛擬現實。

結語

在眾多前端框架和庫的海洋中，React 受歡迎是有原因的。它不僅提供了堅實的程式設計正規化，而且使程式碼更易於維護。隨著技術的發展和前端格局的變化，看看 React 的壽命能走多遠將會很有趣。

原文連結： ​ ​The 4 Main Principles of React That Made It So Popular​ ​

「」