React.js 開發生態系統概覽 [譯]

JavaScript領域發展速度很快，甚至有人認為這已經引起了負效應。一個前端庫從早期開發的小玩具，到流行，再到過時，可能也就幾個月時間。判斷一個工具能否在幾年內依然保持活力都快成了一門藝術了。

React.js在兩年前發布時，我剛開始學Angular，React在我看來只是又一個模板庫而已。這兩年間，Angular得到了JavaScript開發者的認同，它幾乎成了現代前端開發的代名詞。我還看到一些很保守的團隊都在用它，這讓我覺得Angular好像就是未來。

但突然發生了件奇怪的事，Angular好像成了奧斯本效應的受害者，或者說它被提前宣布了死亡。Angular團隊宣布，Angular 2將會完全不同，基本沒有從Angular 1升級遷移的東西，而且Angular 2在接下來的一年里還用不了。這告訴了那些想開發新Web項目的人：你想用一個馬上要被淘汰了的框架寫項目嗎？

開發者們的憂慮影響到了正在建立的React社區，但React總標榜它只是MVC中的視圖層(V)，讓一些依賴完整MVC框架做開發的人感覺有點失望。如何補充其他部分的功能？自己寫嗎？還是用別的三方庫？要是的話該選哪一個呢？

果然，Facebook(React.js的創始)出了另一個殺手锏：Flux工作流，它聲稱要填補模型層(M)和控制層(C )的功能。Facebook還稱Flux只是一種“模式”，不是個框架，他們的Flux實現只是這個模式的一個例子。就像他們所說，這個實現過于簡單，但還是要寫很多代碼和一堆重復的模板才跑得起來。

這時開源社區發力了，一年后便有了各種Flux實現庫，甚至都出來比較他們的元項目了。Facebook激起了社區的興趣，不是給出現成的東西，而是鼓勵大家提出自己的解決方案，這點很不錯。

當你要結合各種庫開發一個完整架構時，擺脫了框架的束縛，獨立的庫還可以在很多地方重用，在自己構建架構的過程中，這個優點很明顯。

這便是為什么React相關的東西這么有意思。它們可以很容易地在其他JavaScript環境中實現重用。就算你不打算用React，看看它的生態系統都能受到啟發。可以試試強大又容易配置的模塊化打包工具Webpack來簡化構建系統，或者用Babel轉譯器馬上開始用ECMAScript 6甚至ECMAScript 7來寫代碼。

在這篇文章里我會給你概覽一遍這些有意思的庫和特性，來探索下React整個生態系統吧。

構建系統

創建一個新的Web項目時，首先要考慮的可能就是構建系統了。它不只是做為個運行腳本的工具，還能優化你的項目結構。一個構建系統必須能包括下面幾個最主要功能：

• 管理內部與外部依賴
• 運行編譯器和預處理器（例如CoffeeScript與SASS）
• 為生產環境優化資源（例如Uglify）
• 運行開發環境的Web Server，文件監控，瀏覽器自動刷新

最近幾年，Yeoman，Bower與Grunt被譽為現代前端開發的三劍客。他們解決了生成基礎模板，包管理和各種通用任務問題，后面也很多人從Grunt換到了Gulp。

在React的生態系統里，基本上可以丟掉這些東西了，不是說你用不到他們，而是說可以用更先進的Webpack與NPM。怎么做到的呢？Webpack是一個模塊化打包工具，用它可以在瀏覽器環境下使用Node.js中常用的CommonJS模塊語法。其實它要更簡單點，因為你不用為了前端另外學一種包管理方案。只需要用NPM，就可以做到服務端與前端模塊的共用。也不用處理JS文件按順序加載的問題，因為它能夠從每個文件的import語法中推測出依賴關系，整個串聯成一個可以在瀏覽器中加載的腳本。

更強大的是Webpack不只像同類工具Browserify，它還可以處理其他類型的資源。例如用加載器，可以將任何資源文件轉換成JavaScript函數，去內聯或加載引用到的文件。用不著手工預處理還有從HTML中引用資源了，只要在JavaScript中require CSS/SASS/LESS文件就好了，Webpack會根據配置文件的描述去搞定一切。它還提供了個開發環境的Web Server，文件監控器，你可以在package.json中使用scripts域去定義一個任務：

{"name": "react-example-filmdb","version": "0.0.1","description": "Isomorphic React + Flux film database example","main": "server/index.js","scripts": {"build": "./node_modules/.bin/webpack --progress --stats --config ./webpack/prod.config.js","dev": "node --harmony ./webpack/dev-server.js","prod": "NODE_ENV=production node server/index.js","test": "./node_modules/.bin/karma start --single-run","postinstall": "npm run build"}... }

這些東西就可以代替Gulp與Bower了。當然，還是可以繼續用Yeoman去生成應用基礎模板的。要是Yeoman生成不了你需要的東西時（其實大多時候也都需要刪掉那些用不到的庫），還可以從Github上Clone一個基礎模板，然后再改改。

馬上試試新的ECMAScript

JavaScript在這幾年有很大改善，移除糟粕穩定語言后，我們看到了很多新特性，ECMAScript 6(ES6)已經定稿。ECMAScript 7也已納入標準化日程中，它們的特性也都已經被很多庫采用了。

可能你覺得到IE支持之前都用不上這些JS新特性，但實際我們不需要等瀏覽器完全支持，ES轉譯器已經廣泛應用了。目前最好的ES轉譯器是Babel，它能夠把ES6+代碼轉換成ES5，所以你馬上就能用上新ES特性了（指已經在Babel中實現的那些，其實一般新出的特性也會很快被支持）。

新的JavaScript特性在所有前端框架里都可以用，更新的React能很好的在ES6與ES7下運行。這些新特性可以解決在用React開發時遇到的一些問題。來看下這些改善吧，它們對React項目很有用。稍后我們再看看怎樣利用這些語法，來搭配使用React的工具和庫。

ES6 Classes

面向對象編程是一種強大又廣泛適用的范式，但在JavaScript里感覺有點不一樣。Backbone，Ember，Angular，或React等大多數前端框架都有它們自己的定義類和創建對象的方式。在ES6中，有原生的類支持了，它簡潔清晰而不用我們自己實現，例如：

React.createClass({displayName: 'HelloMessage',render() {return <div>Hello {this.props.name}</div>;} })

使用ES6就可以寫成：

class HelloMessage extends React.Component {render() {return <div>Hello {this.props.name}</div>;} }

再看個詳細的例子：

React.createClass({displayName: 'Counter',getDefaultProps: function(){return {initialCount: 0};},getInitialState: function() {return {count: this.props.initialCount}},propTypes: {initialCount: React.PropTypes.number},tick() {this.setState({count: this.state.count + 1});},render() {return (<div onClick={this.tick}>Clicks: {this.state.count}</div>);} });

ES6可以寫成：

class Counter extends React.Component {static propTypes = {initialCount: React.PropTypes.number};static defaultProps = {initialCount: 0};constructor(props) {super(props);this.state = {count: props.initialCount};}state = {count: this.props.initialCount};tick() {this.setState({count: this.state.count + 1});}render() {return (<div onClick={this.tick.bind(this)}>Clicks: {this.state.count}</div>);} }

在這里不用再寫getDefaultProps和getInitialState這兩個React的生命周期函數了。getDefaultProps改為了類的靜態變量defaultProps，初始state也只需要定義在構造函數中。這種方式唯一的缺點是，在JSX中使用的方法的上下文不會再自動綁定到類實例了，必須用bind來指定。

裝飾器 *

裝飾器是ES7中的特性。通過一個包裝函數，來增強函數或類的行為。例如想為一些組件使用同一個change handler， 而又不想inheritance antipattern，則可以用類的裝飾器去實現。定義一個裝飾器：

addChangeHandler: function(target) {target.prototype.changeHandler = function(key, attr, event) {var state = {};state[key] = this.state[key] || {};state[key][attr] = event.currentTarget.value;this.setState(state);};return target; }

在這里，函數addChangeHandler添加了changeHandler方法到目標類target的實例上。

要應用裝飾器，只需要：

MyClass = addChangeHandler(MyClass)

或者用更優雅的ES7寫法：

@addChangeHandler class MyClass {... }

因為React沒有雙向數據綁定，在用到input之類的控件時，代碼就會比較冗余，changeHandler函數則把它簡化了。第一個參數表示在state對象中使用的key，它將存儲input的一個數據對象。第二個參數是屬性，它表示input的值。這兩個參數在JSX中被傳入:

@addChangeHandler class LoginInput extends React.Component {constructor(props) {super(props);this.state = {login: {}};}render() {return (<inputtype='text'value={this.state.login.username}onChange={this.changeHandler.bind(this, 'login', 'username')} /><inputtype='password'value={this.state.login.password}onChange={this.changeHandler.bind(this, 'login', 'password')} />)} }

用戶名輸入框發生改變時，輸入框的值會被直接存到this.state.login.username中，不需要一個個去寫handler了。

箭頭函數

JavaScript的動態上下文this不太直觀，成了開發者的常痛了。比如在類里，包裝函數中的this都被指向了全局變量。要fix這個問題，通常是把this存到外部作用域下(例如_this)，然后在內部函數中用它：

class DirectorsStore {onFetch(directors) {var _this = this;this.directorsHash = {};directors.forEach(function(x){_this.directorsHash[x._id] = x;})} }

在ES6中，函數function(x) { 可以寫成 (x) => {。這種箭頭方式的函數定義不僅將內部的this綁定到了外部作用域，而且看起來很簡潔*，在寫大量異步代碼時很有用：

onFetch(directors) {this.directorsHash = {};// for each循環處理函數directors.forEach((x) => {this.directorsHash[x._id] = x;}) }

解構賦值

ES6中的解構賦值允許在賦值表達式左邊寫個復合對象：

var o = {p: 42, q: true}; var {p, q} = o;console.log(p); // 42 console.log(q); // true

在React中有什么實際用處嗎？看下面這個例子：

function makeRequest(url, method, params) {var config = {url: url,method: method,params: params};... }

用解構方式，可以一次給幾個鍵賦值。url, method, params這些值會被自動賦給有著同名鍵的對象中。這讓代碼更不易出錯：

function makeRequest(url, method, params) {var config = {url, method, params};... }

這樣看起來更好，但就是對javascript ES6不熟悉的時候，看著很奇怪。

解構賦值也可以用來加載一個模塊的子集：

const {clone, assign} = require('lodash'); function output(data, optional) {var payload = clone(data);assign(payload, optional); }

函數的默認，剩余，擴展參數

在ES6中函數傳參更強大了，可以為函數設置默認參數：

function http(endpoint, method='GET') {console.log(method)... }http('/api') // GET

覺得arguments用起來很麻煩？可以把剩余參數寫成一個數組：

function networkAction(context, method, ...rest) {// rest is an arrayreturn method.apply(context, rest); }

要是不想調用apply()方法，可以把數組擴展成函數的參數：

myArguments = ['foo', 'bar', 123]; myFunction(...myArguments);

Generator與Async函數

Generator是一種可以暫停執行，保存狀態并稍后恢復執行的函數，每次遇到yield關鍵字時，就會暫停執行。Generator寫法：

**注意function 后面帶著* 星號** function* sequence(from, to) {console.log('Ready!');while(from <= to) {yield from++;} }

調用Generator函數：

> var cursor = sequence(1,3) > cursor.next() Ready! { value: 1, done: false } > cursor.next() { value: 2, done: false } > cursor.next() { value: 3, done: false } > cursor.next() { value: undefined, done: true }

當調用Generator函數時，會立即執行到第一次遇到的yield關鍵字處暫停。在調用next()函數后，返回yield后的表達式的值(value)，然后Generator里再繼續執行之后的代碼。每次遇到yield都返回一個值，在第三次調用next()后，Generator函數終止，最后調用的next()將返回{ value: undefined, done: true }。

當然咯，Generator不只能用來創建數字序列。它能夠暫停和恢復函數的執行，這便可以不需要回調函數就完成異步流的控制。

我們用異步函數來證明這一點。一般我們會做些I/O操作，這里為了簡單起見，用setTimeout模擬。這個異步函數立即返回一個promise。（ES6有原生的promise）：

function asyncDouble(x) {var deferred = Promise.defer();setTimeout(function(){deferred.resolve(x*2);}, 1000);return deferred.promise; }

然后寫一個消費者函數：

function consumer(generator){var cursor = generator();var value;function loop() {var data = cursor.next(value);if (data.done) {return;} else {data.value.then(x => {value = x;loop();})}}loop(); }

這個函數接受Generator函數作為參數，只要yield有值，就會繼續調用next()方法。這個例子中，yield的值是promise，所以必須等待promise調用resolve后，再遞歸調用loop()循環。

resolve會調用then()方法，把resolve的結果賦值給value，value被定義在函數外部，它會被傳給下一個next(value)。這次next的調用為yield產生了一個返回值(即value)。這樣可以不用回調函數來寫異步調用了：

function* myGenerator(){const data1 = yield asyncDouble(1);console.log(`Double 1 = ${data1}`);const data2 = yield asyncDouble(2);console.log(`Double 2 = ${data2}`);const data3 = yield asyncDouble(3);console.log(`Double 3 = ${data3}`); }consumer(myGenerator);

Generator函數myGenerator將在每次遇到yield時暫停，等待消費者函數的promise去resolve。在控制臺每隔1秒的輸出：

Double 1 = 2 Double 2 = 4 Double 3 = 6

上面的示例代碼不推薦在生產環境中用，可以用更完善的co庫，能很簡單地用yield處理異步，還包含了錯誤處理：

co(function *(){var a = yield Promise.resolve(1);console.log(a);var b = yield Promise.resolve(2);console.log(b);var c = yield Promise.resolve(3);console.log(c); }).catch(function(err){console.error(err.stack); });

在ES7中，將異步處理的改進更近了一步，增加了async和await關鍵字，無需使用Generator。上面的例子可以寫成：

async function (){try {var a = await Promise.resolve(1);console.log(a);var b = await Promise.resolve(2);console.log(b);var c = await Promise.resolve(3);console.log(c);} catch (err) {console.error(err.stack); } };

有了這些特性，不會覺得JavaScript寫異步代碼麻煩了，而且在任何地方都可以用。

Generator不僅簡潔明了，還能做些用回調很難實現的事。比如Node.js中koa Web框架的中間件。koa的目標是替換掉Express，它有個很不錯的特性：中間件的上下游都可以對服務端響應做進一步修改。看看這段koa服務器代碼：

// Response time logger middleware app.use(function *(next){// Downstreamvar start = new Date;yield next;// Upstreamthis.body += ' World';var ms = new Date - start;console.log('%s %s - %s', this.method, this.url, ms); });// Response handler app.use(function *(){this.body = 'Hello'; });app.listen(3000);

進入第一個中間件時(上游)，遇到yield后，先進入第二個中間件(下游)將響應體設置為Hello，然后再從yield恢復執行，繼續執行上游中間件代碼，為響應體追加了World，然后打印了時間日志，在這里上下游共享了相同的上下文(this)。這要比Express更強大，如果用Express來寫的話可能會是這樣：

var start; // Downstream middleware app.use(function(req, res, next) {start = new Date;next();// Already returned, cannot continue here });// Response app.use(function (req, res, next){res.send('Hello World')next(); });// Upstream middleware app.use(function(req, res, next) {// res already sent, cannot modifyvar ms = new Date - start;console.log('%s %s - %s', this.method, this.url, ms);next(); });app.listen(3000);

也許你已經發現問題了，使用全局的start變量在出現并發請求時會產生污染。

用koa時，可以很容易地用Generator做異步操作：

app.use(function *(){try {const part1 = yield fs.readFile(this.request.query.file1, 'utf8');const part2 = yield fs.readFile(this.request.query.file2, 'utf8');this.body = part1 + part2;} catch (err) {this.status = 404this.body = err;} });app.listen(3000);

可以設想下這個例子在Express中用promise和回調會是什么樣子。

上面討論的Node.js這些跟React有關系嗎？當然咯，Node是React的首選后端服務器。因為Node也用JavaScript，這樣可以前后端共享代碼，用來構建同構的React Web應用，稍后會介紹到。

Flux庫

React很擅長創建視圖組件，但我們還需要一種方式去管理數據和整個應用的狀態。Flux應用架構被普遍認為是React最好的補充。要是你對Flux還很陌生，建議看看這篇快速導覽。

目前還沒有出現大多數人都認同的Flux實現，Facebook官方的Flux實現很多人都覺得很冗余。我們主要關心能不能少寫點模板代碼，配置方便，并且給多層組件提供些好用的功能，支持服務端渲染等等這些。可以看看這里給這些實現庫列出的一些指標。我關注了Alt, Reflux, Flummox, Fluxxor, 和Marty.js。

我選擇庫的方式并不能說客觀，但很有用。Fluxxor是我發現的第一個庫，但現在看起來它有點舊了。Marty.js很有意思，有很多功能，但還是需要寫很多模板代碼，有些功能看起來比較多余。Reflux看起來蠻有吸引力，但感覺對初學者來說有點難，還缺少合適的文檔。Flummox和Alt很相似，但Alt不需要寫很多模板代碼，開發也非常活躍，文檔更新塊，而且有個Slack社區。所以我選了Alt。

Alt Flux

Alt的Flux實現簡單而強大。Facebook的Flux文檔描述了很多關于dispatcher的東西，但在Alt中這些都可以忽略，因為dispatcher被隱式關聯到了action，通常不需要寫多余代碼。只需要關心store，action，component。這三層對應MVC模型：store為模型層，action為控制層，component為視圖層。差異是Flux模型是單向數據流，意味著控制層不能直接修改視圖層，而是觸發模型層后，視圖層被動修改。這對有些Angular開發者來說已經是最佳實踐了。

• component初始化action
• store監聽action然后更新數據
• component被綁定到store，當數據更新時就重新渲染

Action

使用Alt庫時，action通常有兩種寫法：自動與手動。自動action用generateActions函數創建，它們直接發給dispatcher，手動方法則寫成action類的方法，它們可以附帶一個payload發給dispatcher。常用例子是自動action通知store有關app的一些事件。其余由手動action負責，它是處理服務端交互的首選方式。

REST API調用這種就屬于action，完整流程如下：

Component觸發action

action創建者發起一個異步服務器請求，把結果作為一個payload發給dispatcher

store監聽action，對應的action處理器接收結果，然后store更新它的相應狀態

對于AJAX請求，我們可以用axios庫，無縫地處理JSON數據和頭數據。可以用ES7的async/await關鍵字，免去promise與回調。如果POST響應狀態不是2XX，拋出錯誤，然后發出返回的數據或接收到的錯誤。

看個簡單的Alt登錄示例，在這里注銷action不需要做任何事情，只需要通知store，所以可以自動生成它。登錄action是手動的，會把登錄數據作為一個參數發給action的創建者。從服務端獲取響應后，發出數據，有錯誤的話就發出錯誤。

class LoginActions {constructor() {// Automatic actionthis.generateActions('logout');}// Manual actionasync login(data) {try {const response = await axios.post('/auth/login', data);this.dispatch({ok: true, user: response.data});} catch (err) {console.error(err);this.dispatch({ok: false, error: err.data});}} }module.exports = (alt.createActions(LoginActions));

Store

Flux模型的store有兩個任務：作為action的處理器，保存狀態。繼續看看登錄例子是怎么做的吧。

創建一個LoginStore，有兩個狀態屬性：user用于當前登錄的用戶，error用于當前登錄相關的錯誤。為了減少模板代碼數量，Alt可以用一個bindActions函數綁定所有action到store類。

class LoginStore {constructor() {this.bindActions(LoginActions);this.user = null;this.error = null;}... }

處理器定義起來很方便，只需要在對應action名字前加on。因此login的action由onLogin處理。注意action名的首字母是陀峰命名法的大寫。在LoginStore中，有以下兩個處理器，被對應的action調用：

...onLogin(data) {if (data.ok) {this.user = data.user;this.error = null;router.transitionTo('home');} else {this.user = null;this.error = data.error}}onLogout() {this.user = null;this.error = null;}

Component

通常將store綁定到component的方式是用mixin。但mixin快過時了，需要找個其他方式，有個新方法是使用嵌套的component。將我們的component包裝到另一個component里面，它會托管store的監聽然后重新調用渲染。component會在props中接收到store的狀態。這個方法對于smart and dumb component的代碼組織很有用，是以后的趨勢。對于Alt來說，包裝component是由AltContainer實現的：

export default class Login extends React.Component {render() {return (// AltContainer<AltContainer stores={{LoginStore: LoginStore}}><LoginPage/></AltContainer>)} }

LoginPage component也用了我們之前介紹過的changeHandler裝飾器。LoginStore的數據用來顯示登陸失敗后的錯誤，重新渲染則由AltContainer負責。點擊登錄按鈕后執行loginaction，完整的Alt工作流：

@changeHandler export default class LoginPage extends React.Component {constructor(props) {super(props);this.state = {loginForm: {}};}login() {LoginActions.login(this.state.loginForm)}render() {return (<Alert>{{this.props.LoginStore.error}}</Alert><Inputlabel='Username'type='text'value={this.state.login.username}onChange={this.changeHandler.bind(this, 'loginForm', 'username')} /><Inputlabel='Password'type='password'value={this.state.login.password}onChange={this.changeHandler.bind(this, 'loginForm', 'password')} /><Button onClick={this.login.bind(this)}>Login</Button>)} }

同構渲染

同構Web應用是近些年來的熱點話題，它能解決傳統單頁面應用最大的問題：瀏覽器用JavaScript動態創建HTML，如果瀏覽器禁用了JavaScript，內容就無法顯示了，搜索引擎索引不到Web頁面，內容不會出現在搜索結果中。實際上有方法解決這個問題，但做的并不夠好。
同構的方式是通過服務端渲染內容來解決問題。Node.js是服務端的JavaScript，React當然也能運行在服務端。

一些使用單例方式的Flux庫，很難做服務端渲染，單例的Flux 在遇到并發請求時，store數據就會變得混亂。一些Flux庫用實例來解決這個問題，但需要在代碼間傳遞實例。Alt實際也提供了Flux實例，但它用單例解決服務端渲染問題，它會在每次請求后清空store，以便并發請求時每次store都是初始狀態。

React.renderToString函數是服務端渲染的核心，整個React應用運行在服務端。服務端生成HTML后響應給瀏覽器。瀏覽器JavaScript運行時，再渲染剩余部分。可以用Iso庫實現這點，它同時也被集成到了Alt中。

首先，我們在服務端用alt.bootstrap初始化Flux，這會初始化Flux store數據。然后區分哪個URL對應的渲染哪個component，哪個由客戶端Router渲染。由于使用alt的單例版，在每次渲染完后，需要使用alt.flush()初始化store以便為下次請求做好準備。使用iso插件，可以把Flux的狀態數據序列化到HTML字符串中，以便客戶端知道去哪找到這份狀態數據：

// We use react-router to run the URL that is provided in routes.jsx var getHandler = function(routes, url) {var deferred = Promise.defer();Router.run(routes, url, function (Handler) {deferred.resolve(Handler);});return deferred.promise; };app.use(function *(next) {yield next;// We seed our stores with dataalt.bootstrap(JSON.stringify(this.locals.data || {}));var iso = new Iso();const handler = yield getHandler(reactRoutes, this.request.url);const node = React.renderToString(React.createElement(handler));iso.add(node, alt.flush());this.render('layout', {html: iso.render()}); });

在客戶端，拿到了服務端的狀態數據，用來初始化alt的狀態。然后可以運行Router和React.render去更新服務端生成的HTML：

Iso.bootstrap(function (state, _, container) {// Bootstrap the state from the serveralt.bootstrap(state)Router.run(routes, Router.HistoryLocation, function (Handler, req) {let node = React.createElement(Handler)React.render(node, container)}) })

一些有用的庫

例如CSS布局容器，樣式表單，按鈕，驗證，日期選擇器等等。

React-Bootstrap

Twitter的Bootstrap框架應用已經非常普遍，對那些不想花時間寫CSS的開發者很有用。特別是在原型開發階段，Bootstrap不可或缺。要在React中使用Bootatrap，可以試試React-Bootstrap，它使用原生React component重新實現了Bootstrap的jQuery插件。代碼簡潔易懂：

<Navbar brand='React-Bootstrap'><Nav><NavItem eventKey={1} href='#'>Link</NavItem><NavItem eventKey={2} href='#'>Link</NavItem><DropdownButton eventKey={3} title='Dropdown'><MenuItem eventKey='1'>Action</MenuItem><MenuItem eventKey='2'>Another action</MenuItem><MenuItem eventKey='3'>Something else here</MenuItem><MenuItem divider /><MenuItem eventKey='4'>Separated link</MenuItem></DropdownButton></Nav> </Navbar>

個人感覺這才是簡單易懂的HTML吧。

也可以在Webpack中使用Bootstrap，看你喜歡哪個CSS預處理器。支持自定義引入的Bootstrap組件，可以在CSS代碼中使用LESS或SASS的全局變量。

React Router

React Router幾乎已經成了React的路由標準了。它支持嵌套路由，重定向，同構渲染。基于JSX的例子：

<Router history={new BrowserHistory}><Route path="/" component={App}><Route path="about" name="about" component={About}/><Route path="users" name="users" component={Users} indexComponent={RecentUsers}><Route path="/user/:userId" name="user" component={User}/></Route><Route path="*" component={NoMatch}/></Route> </Router>

React Router可以用Link component做應用導航，只需要指定路由名稱：

<nav><Link to="about">About</Link><Link to="users">Users</Link> </nav>

還有集成了React-Bootstrap的路由庫，不想手寫Bootstrap的active類，可以用react-router-bootstrap：

<Nav><NavItemLink to="about">About</NavItemLink><NavItemLink to="users">Users</NavItemLink> </Nav>

Formsy-React

表單開發通常都比較麻煩，用formsy-react來簡化一下吧，它可以用來管理驗證和數據模型。Formsy-React不包含實際的表單輸入，而是推薦用戶自己寫(這是正確的)。如果只用通用表單，可以用formsy-react-components。它包括了Bootstrap類：

import Formsy from 'formsy-react'; import {Input} from 'formsy-react-components'; export default class FormsyForm extends React.Component {enableButton() {this.setState({canSubmit: true});}disableButton() {this.setState({canSubmit: true});}submit(model) {FormActions.saveEmail(model.email);}render() {return (<Formsy.Form onValidSubmit={this.submit} onValid={this.enableButton} onInvalid={this.disableButton}><Inputname="email"validations="isEmail"validationError="This is not a valid email"required/><button type="submit" disabled={!this.state.canSubmit}>Submit</button></Formsy.Form>)} }

日期與選擇器

日期與選擇器組件算是UI庫的錦上添花了，遺憾的是這兩個組件在Bootstrap 3上被移除了，因為它們對于一個通用CSS框架來說比較特殊了。不過我發現了兩個不錯的代替：react-pikaday和react-select。我嘗試過10多個庫，這兩個總體來說很不錯。非常易用：

import Pikaday from 'react-pikaday'; import Select from 'react-select';export default class CalendarAndTypeahead extends React.Component {constructor(props){super(props);this.options = [{ value: 'one', label: 'One' },{ value: 'two', label: 'Two' }];}dateChange(date) {this.setState({date: date});},selectChange(selected) {this.setState({selected: selected});},render() {return (<Pikadayvalue={this.state.date}onChange={this.dateChange} /><Selectname="form-field-name"value={this.state.selected}options={this.options}onChange={selectChange} />)} }

總結 - React.js

這篇文章介紹了目前Web開發的一些技術與框架。有些是React相關的，因為React的開放性，它們也能被用在其他環境。有時候技術進步總會被對新事物的恐懼所阻礙，我希望這篇文章可以打消你對嘗試React, Flux和新的ECMAScript的疑慮。

要是感興趣，可以看看作者用以上技術構建的示例應用。源碼在Github上。

---

本文譯自2015年年中的《Navigating the React.JS Ecosystem》 - Tomas Holas

總結

以上是生活随笔為你收集整理的React.js开发生态系统概览 [译-转]的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。