在看似無窮無盡的JavaScript前端框架和庫中，有一個庫（可以說）占據(jù)了至高無上的地位，那個庫就是React。但是為什么React年復(fù)一年地如此受歡迎呢？在我們深入研究使它如此受歡迎的React原理之前，首先需要了解是什么導(dǎo)致了React的起源以及它旨在解決什么問題。
React的起源
從90年代到21世紀(jì)初，前端Web開發(fā)與現(xiàn)在不同。它的用戶界面少得多，也不像今天的網(wǎng)站那樣具有交互性。在jQuery出現(xiàn)之前，沒有統(tǒng)一的方式來工作和操作DOM（文檔對象模型），jQuery是第一個為開發(fā)人員創(chuàng)建統(tǒng)一的方式來使用DOM而不必?fù)?dān)心開發(fā)人員當(dāng)時面臨的跨瀏覽器兼容性問題的API。這很棒，隨著網(wǎng)站變得越來越大，backbone.js等其他框架允許操作DOM變得越來越容易。
單頁應(yīng)用程序（SPA）的誕生
隨著前端開發(fā)變得越來越容易。網(wǎng)絡(luò)開發(fā)開始發(fā)生轉(zhuǎn)變，每次我們想顯示不同的內(nèi)容時，我們不需要總是從服務(wù)器獲取應(yīng)用程序代碼，取而代之的是，現(xiàn)在更多的應(yīng)用程序正在操縱JavaScript來顯示新內(nèi)容，而無需與服務(wù)器通信。這意味著我們將更少地依賴超文本標(biāo)記語言，而更多地依賴JavaScript。隨著受歡迎程度的提高，谷歌開發(fā)了一個名為AngularJS的框架，以進一步提高開發(fā)SPA的效率。
Facebook問題
盡管當(dāng)時人們注意到隨著應(yīng)用程序的擴展和前端變得越來越復(fù)雜，開發(fā)人員很難調(diào)試他們的代碼并弄清楚數(shù)據(jù)是如何流動的。對于臉譜網(wǎng)及其臉譜網(wǎng)廣告應(yīng)用程序來說尤其如此。盡管他們沒有使用AnGuardiJS，臉譜網(wǎng)廣告團隊意識到，隨著越來越多的人加入開發(fā)團隊，他們的代碼庫也在增加，工程師和開發(fā)人員跟不上，他們意識到他們需要一個最適合他們應(yīng)用程序的更好的架構(gòu)。
React解決方案
為了解決臉譜網(wǎng)面臨的問題，2013年臉譜網(wǎng)發(fā)布了一個非常適合他們的庫，叫做React。一年后，谷歌意識到AngularJS的架構(gòu)使得開發(fā)人員很難大規(guī)模地創(chuàng)建好的應(yīng)用程序，所以他們正在創(chuàng)建一個名為Angular的重拍。隨著React的出現(xiàn)，許多人轉(zhuǎn)向使用React創(chuàng)建應(yīng)用程序，反過來，自從大型科技公司開始使用React以來，React的受歡迎程度飆升。
React的4個原則
隨著React的出現(xiàn)，有4個關(guān)鍵原則導(dǎo)致了它的持續(xù)成功。這4個是
1. 聲明式與命令式方法
在 React 之前，當(dāng)開發(fā)人員與 DOM 交互時，他們要么使用庫，要么手動更改 DOM 的各個部分以響應(yīng)各種用戶事件。這種思維方式被認(rèn)為是必要的。例如：
在上面的示例中，我們循環(huán)遍歷listOfNumbersand 在每次迭代期間，我們將當(dāng)前數(shù)字添加到newList乘以 10 的末尾。解釋每個步驟以實現(xiàn)結(jié)果的過程是命令式思維方式的簡單示例。另一方面，以下是聲明式編程的示例：
在上面的示例中，這是聲明性的，因為我們沒有展示如何制作列表的每個步驟，而是通過使用map()為我們完成工作的函數(shù)來抽象出一些功能。這很棒，因為它允許我們在擴展時更輕松地調(diào)試代碼。
當(dāng)涉及到 React 時，當(dāng)我們操作 DOM 而不是以命令式的方式進行操作時，我們使用 JavaScript 來顯示響應(yīng)事件的每個步驟?，F(xiàn)在，我們可以改為向 React 顯示我們應(yīng)用的狀態(tài)，并且 React 會以它知道的最佳方式呈現(xiàn)應(yīng)用。這就是“React”這個名字的由來，因為它會在狀態(tài)變化時做出反應(yīng)！
2. 組件架構(gòu)
第二個原則是 React 的架構(gòu)基于可重用組件。這會將我們的 Web 應(yīng)用程序分解為樂高積木，我們可以將它們拆開或切換到其他樂高積木。例如：
當(dāng)你使用 React 創(chuàng)建一個網(wǎng)站時，它的第二個原則是你想讓你的組件盡可能地可重用，這樣如果你要制作一個導(dǎo)航欄。導(dǎo)航欄本身將是它自己的組件，可以潛在地用于其他項目以及與其他人共享。與頁腳甚至按鈕組件類似。
3.單向數(shù)據(jù)流
第三個原則指出數(shù)據(jù)從父組件單向傳輸?shù)阶咏M件。以下是它可能采取的步驟示例：
- 父組件將 state 的數(shù)據(jù)以 props 的形式傳遞給子組件，如果它們有的話。
- 子組件返回當(dāng)前狀態(tài)的用戶界面表示或繼續(xù)將數(shù)據(jù)傳遞給降序的子組件。
- React 呈現(xiàn)整個狀態(tài)的 UI。
- 如果用戶引發(fā)事件。狀態(tài)將更新，導(dǎo)致事件再次觸發(fā)并 React 重新渲染。
這很好的原因是它允許代碼隨著應(yīng)用程序的擴展而更易于維護。當(dāng)我們在組件中出現(xiàn)錯誤時，我們知道我們可以查看組件的位置，然后在那里糾正該錯誤，而不必懷疑它是否是由于組件范圍之外的數(shù)據(jù)造成的。
4. 用戶界面庫
最后一個原則是，React 歸根結(jié)底是一個 UI 庫，它只是用戶與前端應(yīng)用程序交互的一種方式。它在如何構(gòu)建應(yīng)用程序方面沒有像框架那樣嚴(yán)格的結(jié)構(gòu)。思考 React 的一個好方法是，與框架相比，它就像一個烤箱，而框架就像一個為您提供所有工具的廚房。React 允許廚師和開發(fā)人員選擇他們自己的工具來制作他們的應(yīng)用程序。React 可用于網(wǎng)絡(luò)、移動設(shè)備，甚至用于開發(fā)虛擬現(xiàn)實。
結(jié)語
在眾多前端框架和庫的海洋中，React 受歡迎是有原因的。它不僅提供了堅實的編程范式，而且使代碼更易于維護。隨著技術(shù)的發(fā)展和前端格局的變化，看看 React 的壽命能走多遠(yuǎn)將會很有趣。
原文鏈接：??The 4 Main Principles of React That Made It So Popular??
