愛伊米

React一直受歡迎的4個原因

在看似無限數量的JavaScript前端框架和庫中,有一個庫(可以說)佔據了至高無上的地位,而這個庫就是React。但為什麼React年復一年地如此受歡迎呢?在我們深入研究使它如此受歡迎的 react 原理之前,我們首先需要了解 React 的起源,以及它旨在解決什麼問題。

React一直受歡迎的4個原因

反應的起源

從90年代到2000年代初,前端Web開發與現在不同。它的使用者介面要少得多,而且不像今天的網站那樣具有互動性。在jQuery出現之前,還沒有一種統一的方式來工作和操作DOM(文件物件模型),jQuery是第一個為開發人員建立統一方式的API,可以使用DOM,而不必擔心開發人員當時面臨的跨瀏覽器相容性問題。隨著網站變得越來越大,其他框架越來越大如

backbone。js,它們

允許操縱DOM變得越來越容易。

單頁應用程式 (SPA) 的誕生

隨著開發的興起,前端變得越來越容易。Web開發開始發生轉變,我們不需要每次想要顯示不同的內容時,總是從伺服器獲取應用程式程式碼,而是更多的應用程式現在正在操縱JavaScript來顯示新內容,且不必與伺服器通訊。這意味著我們將減少對 HTML 的依賴,而更多地依賴於 JavaScript。隨著人氣的增長,谷歌開發了一個名為AngularJS的框架,以進一步提高開發SPA的效率。

React一直受歡迎的4個原因

臉書問題

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

React解決方案

為了解決Facebook面臨的問題,Facebook在2013年釋出了一個名為React的庫,該庫對他們來說非常有效。一年後,谷歌意識到AngularJS的架構使開發人員很難大規模建立良好的應用程式,因此他們正在建立一個名為Angular的重製版。隨著這種情況在 React 的出現時發生,很多人轉向使用 React 建立應用程式,反過來,自從大型科技公司開始使用它以來,React 的受歡迎程度飆升。

React一直受歡迎的4個原因

反應的 4 大原則

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

1。 宣告式與命令式方法

React一直受歡迎的4個原因

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

React一直受歡迎的4個原因

在上面的示例中,我們在每次迭代期間,都將當前數字新增到乘以 10 的末尾。這個解釋每個步驟以實現結果的過程是當務性思維方式的一個簡單例子。另一方面,以下是宣告性程式設計的一個示例:listOfNumbersnewList

React一直受歡迎的4個原因

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

當涉及到 React 時,當我們操作 DOM 而不是以命令式方式執行此操作時,我們使用 JavaScript 來顯示響應事件的每個步驟。現在,我們可以向 React 顯示我們應用程式的狀態,然後 React 將以它所知道的最佳方式呈現應用程式。這就是名稱“React”的由來,因為它會在狀態發生變化時做出反應!

2。 元件架構

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

React一直受歡迎的4個原因

當你使用 React 製作一個網站時,它的第二個原則是,你希望你的元件儘可能可重用,這樣你就要製作一個導航欄。導航欄本身將是它自己的元件,可以在其他專案中使用,也可以與其他人共享。同樣,使用頁尾甚至按鈕元件也是如此。

3。 單向資料流

React一直受歡迎的4個原因

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

父元件以 props 的形式將state資料傳遞給子元件(如果它們採用任何屬性)。

子元件返回當前狀態的使用者介面表示形式,或繼續將資料傳遞給降序子元件。

React 呈現整個狀態的 UI。

如果使用者導致事件。狀態將更新,導致事件再次觸發,React 重新渲染。

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

React一直受歡迎的4個原因

4。 使用者介面庫

最後一個原則是,React 在一天結束時是一個 UI 庫,它只是使用者在前端與應用程式互動的一種方式。在如何構建應用程式方面,它不像框架那樣具有嚴格的結構。React的一個好思考方式是,與一個框架相比,它就像一個擁有所有工具的廚房的框架。React 允許廚師和開發人員挑選自己的工具來製作他們的應用程式。React可用於網路,移動,甚至開發虛擬現實。

結論

在許多前端框架和庫的海洋中,React的流行是有原因的。它不僅提供了可靠的程式設計範例,而且還使程式碼更易於維護。隨著技術的發展和前端格局的變化,看看 React 的壽命會走多遠會很有趣。

對React感興趣的朋友,可以點選下方連結購買書籍學習。

React一直受歡迎的4個原因

React Native入門與實戰

¥

70。55

京東

購買