版13 2 react生態(tài)圈概覽

React

生態(tài)系（Ecosystem）入門簡(jiǎn)介ReactJSReactJS是Facebook推出的JavaScript函式庫(kù)，若以MVC框架來看，React定位是在View的范疇。在ReactJS0.14版之后，ReactJS更把原先處理DOM

的部分獨(dú)立出去（react-dom），讓ReactJS

核心更單純，也更符合React

所倡導(dǎo)的

Learn

once,

write

everywhere

的理念。事實(shí)上，ReactJS本身的API相對(duì)單純，但由于整個(gè)生態(tài)系非常龐大，因此學(xué)習(xí)React卻是一條漫長(zhǎng)的道路。此外，當(dāng)你想把React應(yīng)用在你的應(yīng)用程序時(shí)，你通常必須學(xué)習(xí)整個(gè)React

Stack才能充分發(fā)揮React

的最大優(yōu)勢(shì)。JSX事實(shí)上，JSX并非一種全新的語(yǔ)言，而是一種語(yǔ)法糖（Syntatic

Sugar），一種語(yǔ)法類似XML

的ECMAScript

語(yǔ)法擴(kuò)充。在JSX中HTML和組建這些元素卷標(biāo)的程序代碼有緊密的關(guān)系，這和過去我們強(qiáng)調(diào)HTML、JavaScript

分離的觀念有很大不同。當(dāng)然，你可以選擇不要在React使用JSX，不過相信我，當(dāng)你真正開始撰寫React

組件（Component）時(shí)，你會(huì)很慶幸有JSX

真好。NPMNPM（Node

Package

Manager）是Node.js

下的主流套件管理工具。在NPM

上有非常多的套件，可以讓你不用再重造輪子，更可以讓你可以輕松用指令管理不同的套件。由于NPM

主要是基于CommonJS的規(guī)范，通常必須搭配Browserify

這樣的工具才能在前端使用NPM

的模塊。然而因NPM

是基于Nested

Dependency

Tree，不同的套件有可能會(huì)在引入依賴時(shí)會(huì)引入相同但不同版本的套件，造成檔案大小過大的情形。這和另一個(gè)套件管理工具Bower

專注在前端套件且使用FlatDependency

Tree（讓使用者決定相依的套件版本）是比較不同的地方。ES6+ES6+

系指ES6（ES2015）和ES7

的聯(lián)集，在ES6+新的標(biāo)準(zhǔn)當(dāng)中引入許多新的特性和功能，彌補(bǔ)了過去JavaScript

被詬病的一些特性。由于未來

React

將以支援ES6+

為主，因此直接學(xué)習(xí)ES6+用法是相對(duì)好的選擇。?Babel由于并非所有瀏覽器都支持ES6+語(yǔ)法，所以透過Babel這個(gè)JavaScript編譯程序（可以想成是翻譯機(jī)）可以讓你的ES6+、JSX等程序代碼轉(zhuǎn)換成瀏覽器可以看的懂得語(yǔ)法。通常會(huì)在文件夾的root位置加入.bablerc進(jìn)行轉(zhuǎn)譯規(guī)則preset

和引用外掛（plugin）的設(shè)定。?JavaScript

模塊化開發(fā)CDN-BasedAMDCommonJSCMDUMDES6

ModuleCDN-Based也就是最傳統(tǒng)的<script>引入方式，然而使用這種方式雖然簡(jiǎn)單方便，但在開發(fā)實(shí)際中大型應(yīng)用程序時(shí)會(huì)產(chǎn)生許多弊端：全局作用域容易造成變數(shù)污染和沖突文件只能依照<script>順序加載，不具彈性在大型項(xiàng)目中各種資源和版本難以維護(hù)必須由開發(fā)者自行判斷模塊和函式庫(kù)之間的依賴關(guān)系A(chǔ)MDAsynchronousModuleDefinition簡(jiǎn)稱AMD，為異步加載模塊的規(guī)范，其在宣告時(shí)模塊時(shí)即需定義依賴的模塊。AMD常用于瀏覽器端，其最著名的實(shí)踐為RequireJS基本格式：define(id?,

dependencies?,

factory);CommonJSCommonJS

規(guī)范是一種同步模塊加載的規(guī)范。以

Node.js其遵守CommonJS規(guī)范，使用require進(jìn)行模塊同步加載，并透過exports、module.exports

來輸出模塊。主要實(shí)現(xiàn)為Node.js服務(wù)器端的同步加載和瀏覽器端的Browserify。CMDCMD全稱為CommonModuleDefinition，其規(guī)范和AMD

類似，但相對(duì)簡(jiǎn)潔，卻又保持和

CommonJS

的兼容性。其最大特色為：依賴就近，延遲執(zhí)行。主要實(shí)現(xiàn)為：Sea.js。UMDUniversal

Module

Definition

是為了要兼容

CommonJS和AMD所設(shè)計(jì)的規(guī)范，希望讓模塊能跨平臺(tái)執(zhí)行ES6

ModuleECMAScript6的標(biāo)準(zhǔn)中定義了JavaScript的模塊化方式，讓JavaScript

在開發(fā)大型復(fù)雜應(yīng)用程序時(shí)上更為方便且易于管理，亦可以取代過去AMD、CommonJS等規(guī)范，成為通用于瀏覽器端和服務(wù)器端的模塊化解決方案。但目前瀏覽器和Node

在ES6

模塊支持度還不完

整，大部分情況需要透過Babel

轉(zhuǎn)譯器進(jìn)行轉(zhuǎn)譯。Webpack/Browserify

+

Gulp隨著網(wǎng)頁(yè)應(yīng)用程序開發(fā)的復(fù)雜性提升，現(xiàn)在的網(wǎng)頁(yè)往往不單只是單純的網(wǎng)頁(yè)，而是一個(gè)網(wǎng)頁(yè)應(yīng)用程序（WebApp）。為了管理復(fù)雜的應(yīng)用程序開發(fā)，此時(shí)模塊化開發(fā)方法便顯得日益重要，而理想上的模塊化開發(fā)工具一直是前端工程的很大的議題。Webpack和Browserify+Gulp則是進(jìn)行React應(yīng)用程序開發(fā)常用的開發(fā)工具，可以協(xié)助進(jìn)行自動(dòng)化程序代碼打包、轉(zhuǎn)譯等重復(fù)性工作，提升開發(fā)效率WebpackWebpack

是一個(gè)模組打包工具（modulebundler），以下列出Webpack

的幾項(xiàng)主要功能：將CSS、圖片與其他資源打包打包之前預(yù)處理（Less、CoffeeScript、JSX、ES6等）的檔案依entry

文件不同，把.js

分拆為多個(gè).js

檔案整合豐富的Loader

可以使用（Webpack

本身僅能處理JavaScript

模組，其餘檔案如：CSS、Image

需要載入不同Loader

進(jìn)行處理）Browserify如同官網(wǎng)上說明的：Browserify

lets

yourequire('modules')in

the

browser

by

bundling

upall

of

your

dependencies.，Browserify是一個(gè)可以讓你在瀏覽器端也能使用像Node

用的CommonJS

規(guī)范一樣，用輸出（export）和引用（require）來管理模塊。此外，也能讓前端使用許多在NPM

中的模塊。GulpGulp

是一個(gè)前端任務(wù)工具自動(dòng)化管理工具（TaskRunner）。隨著前端工程的發(fā)展，我們?cè)陂_發(fā)前端應(yīng)用程序時(shí)有許多工作是必須重復(fù)進(jìn)行，例如：打包文件、uglify、將LESS轉(zhuǎn)譯成一般的CSS的檔案，轉(zhuǎn)譯ES6

語(yǔ)法等工作。若是使用一般手動(dòng)的方式，往往會(huì)造成效率的低下，所以透過像是Grunt、Gulp這類的Task

Runner

不但可以提升效率，也可以更方便管理這些任務(wù)。由于Gulp

是透過pipeline

方式來處理檔案，在使用上比起Grunt

的方式直觀許多，所以這邊我們主要討論的是Gulp。ESLintESLint是一個(gè)提供JavaScript和JSX的程序代碼檢查工具，可以確保團(tuán)隊(duì)的程序代碼質(zhì)量。其支持可插拔的特性，可以根據(jù)需求在.eslintrc設(shè)定檢查規(guī)則。目前主流的檢查規(guī)則會(huì)使用Airbnb

所釋出的

Airbnb

React/JSX

Style

Guide，在使用上需先安裝

eslint-config-airbnb

等套件。?React

RouterReactRouter是React中主流使用的Routing函式庫(kù)，透過URL

的變化來管理對(duì)應(yīng)的狀態(tài)和組件若開發(fā)不刷頁(yè)的單頁(yè)式（singlepageapplication）的React

應(yīng)用程序通常都會(huì)需要用到。Flux/ReduxFlux

是一個(gè)實(shí)現(xiàn)單項(xiàng)流的應(yīng)用程序數(shù)據(jù)架構(gòu)（architecture），同樣是由Facebook推出，并和React

專注于View

的部份形成互補(bǔ)。而由DanAbramov所開發(fā)的Redux被React開發(fā)社群認(rèn)為是Flux-like更優(yōu)雅的作法，也是目前主流搭配React的狀態(tài)（State）管理工具。讓你在開發(fā)復(fù)雜的應(yīng)用程序時(shí)可以更方便管理你的狀態(tài)（state）。??ImmutableJSImmutableJS，是一個(gè)能讓開發(fā)者建立不可變數(shù)據(jù)結(jié)構(gòu)的函式庫(kù)。建立不可變（immutable）數(shù)據(jù)結(jié)構(gòu)不僅可以讓狀態(tài)可預(yù)測(cè)性更高，也可以提升程序的效能。?Isomorphic

JavaScriptIsomorphicJavaScript是指前后端（Client/Server）共享相同部分的程序代碼，讓JavaScript

應(yīng)用可以同時(shí)執(zhí)行在瀏覽器端和服務(wù)器端，在React中可以透過服務(wù)器端渲染（server

side

rendering）靜態(tài)HTML

的方式達(dá)到Isomorphic

JavaScript

效

果，讓SEO

和執(zhí)行效能更加提升并讓前后端共享程序代碼而另一個(gè)常一起出現(xiàn)的Universal

JavaScript

一般定義更為廣泛，系指可以運(yùn)行在不同環(huán)境下的

JavaScriptCode，并不局限于瀏覽器和服務(wù)器端。但要留意的是在Github

和許多技術(shù)文章的分享

上會(huì)把兩者定義為同一件事情。React

測(cè)試Facebook本身有提供TestUtilities，但由于不夠好用，所以目前主流開發(fā)社群比較傾向使用

Airbnb團(tuán)隊(duì)開發(fā)的enzyme，其可以與市面上常見的測(cè)試工具（Mocha、Karma、Jest等）搭配使用。其中Jest是Facebook所開發(fā)的單元測(cè)試工具，其主要基于Jasmine所建立的測(cè)試框架。Jest除了支持JSDOM

外，也可以自動(dòng)模擬(mock)

透過

require()進(jìn)來的模塊，讓開發(fā)者可以更專注在目前被測(cè)試的模塊中。React

NativeReact

Native和過去的Apache

Cordova

等基于

WebView的解決方案比較不同，它讓開發(fā)者可以使用React

和JavaScript

開發(fā)原生應(yīng)用程序（Native

App），讓Learn

once,

write

anywhere理想變得可能。ali的weex也可以做到這件事目前GraphQL/RelayGraphQL

是Facebook

所開發(fā)的數(shù)據(jù)查詢語(yǔ)言（Data

Query

Language），主要是想解決