React與前端：React家族介紹
我曾在微博上說過“React就是哪吒”，那麼一個前端框架和哪吒有什麼關係呢？其實我覺得二者有某些相似的地方。
哪吒家室顯赫，擁有的神器多到需要三頭六臂才能拿得過來，後來經歷磨難，脫胎換骨，能夠獨當多面。
React源自Facebook，集多項特色於一身——元件化、宣告式、虛擬DOM、區域性更新、狀態機等，React 16引入的Fiber架構更可謂脫胎換骨，得Flux、Redux、immutable.js、React Router助陣，如虎添翼。
隨著React Native的出世和React Canvas的誕生，更是讓React如同有了三頭六臂一般，將傳統前端突破到安卓端、iOS端，大有一統全端的趨勢。
目前三大框架Angular、React、Vue.js逐鹿中原，無論誰主沉浮，我都相信能“革了React命”的一定不是React的仿製品。
如果你對上面提到的這些名詞不是特別瞭解，建議你閱讀本文後續的內容，本文將介紹前端的歷史和React相關知識。
1 前端簡史
在沒有Web時，資訊的傳遞不太容易，得發明一種工具，讓資訊的創造者和閱讀者都能看到一樣的東西，於是Web誕生了。
1.1 Web 1.0
Web的內容由網站製作者生成，家族介紹使用者只能瀏覽內容，資訊的流動方向只能從服務端到客戶端，這一階段被稱為Web 1.0時代。有人說這個時代的Web是靜態的，這一階段主要涉及的技術是HTML、CSS、JavaScript。
如果一段文字沒有標點，那就不太容易閱讀，標點其實是一種資料結構，資料必須有結構承載才能更容易傳遞。在Web中，HTML就是資料的結構，比如標題、段落、強調、表格等，現在我們稱其為語義化。
因為視覺是Web的主要傳播途徑，除了結構，視覺也是一種資訊，CSS成為視覺資訊的載體，有HTML和CSS已經可以製作出頁面了。由於HTML中大量使用div標籤，HTML+CSS也被稱作DIV+CSS。
光有視覺頁面還是不夠的，頁面還要能和使用者互動，比如點選按鈕要有彈窗，JavaScript正是用來做這部分工作的，被稱為行為。至此，Web三要素，結構、表現和行為就全了，分別對應HTML、CSS和JavaScript。
HTML、CSS和JavaScript要分離，一直被視為前端的金科玉律，CSS選擇器成為連線HTML和CSS的紐帶，而DOM成為HTML和JavaScript的橋樑，CSSOM承擔了JavaScript和CSS的媒介。
1.2 Web 2.0
Web的內容主要由使用者生成，使用者瀏覽其他使用者創造的內容，這一階段統稱為Web 2.0時代。這一階段涉及的技術繁多。
伺服器語言和表單的發明，第一次讓資訊可以從客戶端流向服務端，賬號體系把使用者從螢幕前搬到了Web上，這一階段的技術棧沒啥變化，JavaScript也只是作為玩具語言，用來驗證表單，前端開發者都被稱作美工。
2006年穀歌推出了Gmail，可以不用重新整理完成各種操作，其媲美客戶端的體驗，也將Web 2.0推上了浪潮之巔。
一種被稱為AJAX的名詞被髮明——頁面需要更新，JavaScript向伺服器發起請求，服務端不再返回頁面，而是返回XML格式的資料，然後JavaScript將資料渲染到頁面中——最開始採用的是拼接字串的形式，後來發明了前端模版，比如template.js。
這一階段湧現了大批技術，如prototype.js、Dojo、ExtJS、jQuery，其巔峰是YUI 3。這些工具各有各的優點，其中jQuery可以作為代表，其主要功能是抹平瀏覽器差異，簡化DOM操作。
JavaScript程式碼規模越來越大，一個JavaScript檔案已經不能適應現狀了，需要拆分成多個JavaScript檔案（分治思想），程式碼之間存在依賴關係，且依賴關係越來越複雜，為此社群進行了各種嘗試來解決這個問題，比如採用AMD、CMD、CommonJS。2015年ECMAScript 6定稿，帶來了原生的模組系統，這一問題才最終被解決。
隨著專案工程越來越大，程式碼的組織結構是不是也需要複用？有人將後端的MVC模式帶到前端，但MVC並不適合前端，因此前端做了適當改變，誕生了MVP、MVVM等框架，典型的有Backbone.js、Knockout、AngularJS等。
2013年釋出的React，將一種全新的思路帶到了我們面前，一個新的時代已經來了。
2 React是什麼
傳說Facebook的大神們，對現有的框架都不滿意，於是有了React。React是前端一個用於構建使用者介面的 JavaScript 庫，和其他MVC庫不一樣的地方是，React僅僅涉及介面層，類似於MVC中的View。
React是一次完整的抽象，改變了我們思考、設計和寫程式碼的方式；React是一次完整的統一，統一了以前很多種編寫介面的方式。原生前端實現介面太過靈活，基本上團隊裡每個人都有自己的一套方法，而React是一套非常優雅的方法論，我們苦苦追尋了多年的最佳思想，竟然都在React裡了。
React有三個特色，分別是宣告式、基於元件和一次學習，多端受用。
2.1 宣告式
React改變了也統一了介面的實現方式，在React中，將介面抽象為狀態和檢視，只需定義好每個狀態對應的檢視就行了，剩下的React會幫你搞定，比如狀態改變時會自動重新整理檢視等。
下面程式碼中的flag如果發生變化，介面會自動重新整理。
2.2 基於元件
React改變了寫前端的習慣，在React的世界裡一切都是元件，以前的入口在HTML，現在的入口在JavaScript；以前是HTML + CSS + JavaScript的組合，現在是JavaScript+ CSS的組合；以前要想複用功能得拷貝三處程式碼，現在僅需引用一個元件即可。來看一個元件的例子。
上面的程式碼中包含兩種元件，一種是HTML標籤元件，另一種是React元件，其區別是HTML標籤以小寫字母開頭，React元件以大寫字母開頭。
2.3 一次學習，多端受用
React中抽象了一層虛擬DOM，所以我們可以頻繁地修改狀態，但是更改的都是虛擬DOM。當虛擬DOM發生變化後，會集中更新到真實DOM，因為虛擬DOM的存在，只要替換掉底層的渲染引擎，就可以突破瀏覽器了。React Native就是將React實現到了原生App，React的一切都在，但是底層卻不是DOM了，而是原生的View。類似的還有服務端渲染，這也是本書主要講的內容。理解了React的思想，就可以搞定Web和App，簡直不能再棒了。
3 React家族
React只是檢視層，React家族還有一些其他成員，本節來簡單介紹一下。
3.1 React Router
傳統Web都是多頁面的，每個頁面一個URL，頁面之間通過超連結跳轉，由瀏覽器負責管理頁面的跳轉、前進、後退等功能，通過指定URL可以直接跳轉到指定頁面。
比如有一個首頁和一個文章頁，此時首頁是一個URL，文章頁是一個URL，可以從首頁跳轉到文章頁，然後再從文章頁跳轉到首頁，這一切都由瀏覽器完成。
傳統頁面重新整理跳轉的方式，體驗不是很友好，於是更友好的單頁面應用來了，也被稱為WebApp。在這種模式下整個應用只有一個傳統的頁面，傳統模式下的多個頁面被抽象成一個個檢視，原來的頁面跳轉，此時由JavaScript負責切換檢視；原來向後端請求整個頁面，現在變成向後端請求資料介面，因為不需要重新整理頁面，體驗非常好。
但這種方式有一個問題，就是除了首頁，其他頁面是無法直接到達的，也就是每次都要先進到首頁；為了能夠實現傳統Web那種URL的優點，需要在前端模擬一套路由，有了路由就可以通過URL直接進入某個檢視了。
React非常適合做單頁應用，React Router就是專門為React定製的路由，對React非常友好。下面看一下使用React Router實現上面首頁和文章頁跳轉的情況。
3.2 Redux
面向介面的程式設計可以分為三部分：介面、資料和資料操作。React對介面的抽象做到了極致，但對資料和資料操作幾乎沒有約束，我們可以把這部分寫到React元件中，也可以抽出來，將介面和資料與對資料操作進行分離，這就是Redux的工作。
Redux是JavaScript的狀態容器，提供可預測化的狀態管理，Redux因React而生，但也可以與其他類庫配合使用。
3.3 React Native
React Native是一套披著React外衣的原生控制元件，React Native將原生控制元件封裝為跨平臺的React元件，並賦予我們通過JavaScript呼叫原生控制元件的能力。
在React Native裡沒有CSS，但React Native讓我們可以通過CSS的語法來設定原生控制元件的屬性。下面是一個例子。
可以看到，React Native就是用React語法封裝過的原生控制元件，用CSS語法設定控制元件屬性。
本文選自《React狀態管理與同構實戰》一書，作者侯策、顏海鏡，由電子工業出版社2018年8月出版。
React自開源以來，便以革命性的設計理念迅速顛覆了前端開發的傳統意義，其倡導的元件化、狀態管理、虛擬DOM等思想極大提高了前端開發效率。為了更加高效地維護React應用的資料狀態，以Redux為代表的資料管理模式橫空出世。
本書以React技術棧為核心，在介紹React用法的基礎上，從原始碼層面分析了Redux思想，同時著重介紹了服務端渲染和同構應用的架構模式。書中包含許多專案例項，不僅為使用者打開了React技術棧的大門，更能提升讀者對前沿領域的整體認知。主要適合具有一定JavaScript基礎的前端工程師，以及對前端開發感興趣的相關從業人員閱讀。