摘要：譯者按最近依舊如火如荼相信大家都躍躍欲試我們團隊也開始在領域有所嘗試年應該是逐漸走向成熟的一年讓我們一起來看看國外的開發者們都總結了哪些最佳實踐年在全世界都有很多關于新的更新和開發者大會的討論關于去年的重要事件請參考那么年最有趣的問題來了我

譯者按：最近React(web/native)依舊如火如荼,相信大家都躍躍欲試,我們團隊也開始在React領域有所嘗試. 2016年應該是
React 逐漸走向成熟的一年,讓我們一起來看看國外的開發者們都總結了哪些"最佳實踐".

2015年 React 在全世界都有很多關于新的更新和開發者大會的討論.關于去年的重要事件,請參考 React in 2015.
那么,2016年最有趣的問題來了:我們應該如何開發一個 App, 有什么推薦的庫?
作為一名長期使用 React.js 的開發者,我對此問題有自己的答案和最佳實踐,但你可能不一定完全同意.我對你的想法和觀點很有興趣,請留言以便討論.

如果你剛剛開始接觸React.js,可以查看我們的 React.js 教程,或者 Pete Hunt 的 React howto.

在 React.js 應用中處理數據非常簡單,但也充滿挑戰.
這是因為你可以使用多種方式將屬性數據傳遞給 React 組件,從而構建出渲染樹,但你應該怎樣更新視圖卻不是顯而易見的.
2015一開始便誕生了很多不同 Flux 庫,隨后涌現出出更多具有更強功能和更加響應式解決方案.
讓我們一起來看看：

根據我們的經驗,Flux 經常被過度使用,(就是大家總是在不需要它的時候仍然用了它).
Flux 提供了一種非常清晰的方式來存儲和更新App 全局 state(譯者注：對應 react 中的 state),并在需要的時候觸發渲染.
Flux 在管理App的全局狀態時很有用,比如：管理已登錄用戶狀態,路由狀態,或者是活躍賬號狀態,但若是用來管理臨時數據或者本地數據,立刻就會變得很痛苦.
我們不推薦使用 Flux 來管理路由相關的數據,比如 /items/:itemId.獲取路由數據并存儲在組件的 state 之中.這種情況下,它會在組件銷毀時一起被銷毀.
如果你想了解更多關于 Flux 的信息,建議閱讀 The Evolution of Flux Frameworks.

Redux 是一個 JavaScript App的可預測 state 容器.
如果你覺得需要 Flux 或者相似的解決方案,你應該了解一下 redux,并學習 Dan Abramov 的 Getting started with redux,這能夠迅速提高你的開發技能.
Redux 延續并改進了 Flux 的思想,學習了 Elm ,避開了 Flux 的復雜度(譯者注：Elm 是一門函數式編程語言).

1.扁平化 state

API 經常會返回嵌套的資源.這在 Flux 或基于 Redux 的架構中處理起來會非常困難.我們推薦使用 normalizr 這類庫將數據進行扁平化處理,盡可能地扁平化state.
像這樣：

const data = normalize(response, arrayOf(schema.user))
state = _.merge(state, data.entities)

(我們使用isomorphic-fetch與API進行通信)

2.使用 immutable state

共享的可變性 state 是罪惡的根源. - Pete Hunt, React.js Conf 2015

不可變對象是指在創建后不可再被修改的對象.
不可變對象可以讓我們免于痛苦,并且通過引用級的比對檢查來提升渲染性能.比如在 shouldComponentUpdate 中：

shouldComponentUpdate(nexProps) {
 // 不進行對象的深度對比
 return this.props.immutableFoo !== nexProps.immutableFoo
}

3. 如何在JavaScript中實現不可變?

本辦法是小心的寫代碼,示例代碼如下,你需要在單元測試中通過 deep-freeze-node 來反復驗證.

return {  
  ...state,
  foo
}

return arr1.concat(arr2)

相信我,這是最明顯的例子了.
更簡單也更自然的方式是使用 Immutable.js.

import { fromJS } from "immutable"

const state = fromJS({ bar: "biz" })  
const newState = foo.set("bar", "baz") 

Immutable.js 非常之快,背后理念也非常美妙.哪怕你并不準備使用它,我也推薦閱讀這個由 Lee Byron 所制作的視頻 Immutable Data and React.它非常深刻的講解了 Immutable.js 的工作原理.

4. Observables and Reactive 解決方案

如果你不喜歡 Flux/Redux 或者只是想要更加 reactive,不用失望!還有很多數據處理的方案供你選擇,這里有一個可能是你想要的庫的簡單列表：

cycle.js(“一個更清晰簡潔的函數式 reactive JavaScript 框架”)

rx-flux(“Flux 架構與 Rxjs 的結合”)

redux-rx(“Redux的 Rxjs 工具集”)

mobservable(“可預測的數據,reactive的功能,簡潔的代碼”)

幾乎所有 App 都有路由功能.如果你在瀏覽器中使用 React.js,你將會在挑選庫的時候遇到選擇性問題.
我們的選擇是react-router, 來自優秀的 rackt 社區.Racket 給 React.js 愛好者們帶來了很多高質量資源.
要使用 react-router,請查看它的文檔.但更重要的是：如果你使用Flux/Redux,我們推薦你將路由 state 與 store 或全局 state 保持同步.
同步的路由 state 會幫助你控制 Flux/Redux Actions 的路由行為,并能在組件中讀取路由狀態和參數.
Redux 用戶可以通過 redux-simple-router 這個庫輕松實現它.

只有一小部分 webpack 用戶知 App 代碼可以分割成多個 JavaScript 塊.

require.ensure([], () => {  
  const Profile = require("./Profile.js")
  this.setState({
    currentComponent: Profile
  })
})

這對于大型應用十分有用,每次部署之后用戶瀏覽器不用下載那些很少會使用到的代碼,比如Profile頁面. 更多代碼塊將導致更多 HTTP 請求 - 但是使用 HTTP/2 多路復用就沒有問題.
結合 chunk hashing,可以在代碼更新之后優化緩存命中率.
下個版本的 react-router 將會對代碼分隔做更多支持.
對于 react-router 的未來規劃,可以去查看博客 Ryan Florence: Welcome to Future of Web Application Delivery.

很多人都在抱怨JSX,但首先要知道,它在 React 中是可選的.
JSX 在最后都會通過 Babel 被編譯成 JavaScript.你可以直接編寫 JavaScript 來替代 JSX,但是在處理 HTML 的時候使用 JSX 會感覺更加自然.
特別是對于不懂技術的人來說,他們只可以理解和修改必要的部分.

JSX 是一種與 XML 類似的 JavaScript 語法擴展.你可以通過一個簡單的 JSX 語法轉換器來轉換它.— JSX in depth

如果你想了解更多 JSX 的內容,查看文章 JSX Looks Like An Abomination – But it’s Good for You

React 與 ES2015 的 Class 語法搭配的很好.

class HelloMessage extends React.Component {  
  render() {
    return
Hello {this.props.name}
} }

相對于mixins,我們更喜歡高階組件,所以保留 createClass 更像是一個語法問題,而不是技術問題. 我們認為使用 createClass 或者 React.Component 只是選擇不同而已,沒有對錯之分.

如果你仍然沒有檢查 熟悉類型,那么你應該從2016年開始做起,這將為你節省大量的時間,相信我.

MyComponent.propTypes = {  
  isLoading: PropTypes.bool.isRequired,
  items: ImmutablePropTypes.listOf(
    ImmutablePropTypes.contains({
      name: PropTypes.string.isRequired,
    })
  ).isRequired
}

當然,也可以使用 react-immutable-proptypes 驗證 Immutable.js 所編寫的屬性.

當前 mixins 將死,而且在 ES6 的 Class 不再支持 mixins,我們應當尋找新方案.

PassData({ foo: "bar" })(MyComponent)
簡單來講,從由原始組件創造一個新的組件并且擴展它的行為.你可以在多種場景來使用它,比如鑒權：requireAuth({ role: "admin" })(MyComponent)(檢查用戶權限,如果未登錄就跳轉),或者將組件與 Flux/Redux 的 store 連通.
在 RisingStack,我們也喜歡將數據拉取和控制類的邏輯分離到高階組件中,以盡可能地保持 view 層的簡單.

保證測試的高代碼覆蓋率是開發周期中的重要一環.幸運的是,React.js 社區有很多這樣的庫來幫助我們.

AirBnb 的 enzyme 是我們最喜愛的組件測試庫之一.使用它的淺渲染特性可以對組件的邏輯和渲染結果進行測試,非常神奇.它現在還不能替代selenium測試,但是將前端測試提升到了一個新高度.

it("simulates click events", () => {  
  const onButtonClick = sinon.spy()
  const wrapper = shallow(
    
  )
  wrapper.find("button").simulate("click")
  expect(onButtonClick.calledOnce).to.be.true
})

看起來非常簡潔,不是嗎？
你使用 chai 作為測試斷言庫嘛？相信你會喜歡 chai-enyzime 的!

測試 reducer 非常簡單,它響應新到來的 actions 然后將原來的 state 轉換為新的 state：

it("should set token", () => {  
  const nextState = reducer(undefined, {
    type: USER_SET_TOKEN,
    token: "my-token"
  })

  // immutable.js state output
  expect(nextState.toJS()).to.be.eql({
    token: "my-token"
  })
})

測試 actions 也很簡單,但是異步 actions 就不太一樣了.對于測試異步的 actions 來說,我們推薦使用 redux-mock-store,非常有幫助.

it("should dispatch action", (done) => {  
  const getState = {}
  const action = { type: "ADD_TODO" }
  const expectedActions = [action]

  const store = mockStore(getState, expectedActions, done)
  store.dispatch(action)
})

關于更深入的 redux測試 ,請參考官方文檔.

雖然 React.js 并不依賴代碼打包工具就可以工作得很好,但我們還是推薦使用 Webpack 或者 Browserify 來發揮 npm 的能力.Npm 有很多 React.js 的包,可以幫助你優雅地管理依賴.
(請不要忘記復用你自己的組件,這是優化代碼的絕佳方式.)

這本身不是一個 React 相關的問題,但是大多數人都在打包他們的 React 應用,所以我有必要在這里提一下.
當你打包源代碼的時候,要時刻警惕打包后文件的大小.想要將其控制在最小體積,你需要思考如何如何 require/import 依賴.
查看下面的代碼片段,這兩種方式可以對輸出大小會產生重大影響：

import { concat, sortBy, map, sample } from "lodash"

// vs.
import concat from "lodash/concat";  
import sortBy from "lodash/sortBy";  
import map from "lodash/map";  
import sample from "lodash/sample";  

查看Reduce Your bundle.js File Size By Doing This One Thing,以獲取更多信息.
我們也喜歡將代碼分離到至少 vendors.js 和 app.js 兩個文件,因為 vendors 相對于我們的代碼庫來說更新頻率低很多.
對輸出文件進行 hash 命名(WebPack中的chunk hash),并使用長緩存,我們可以顯著地減少訪問用戶需要下載的代碼.結合代碼懶加載,優化效果非常顯著.
如果你還不太熟悉 Webpack,可以查看這本優秀的 React webpack cookbook.

如果你曾使用過hot reload編寫單頁面應用,當你在處理某些與狀態相關的事情時,可能你就會明白當你在編輯器中點擊保存,整個頁面就重新加載了是多么令人討厭.你需要逐步點擊操作到剛才的環節,然后在這樣的重復中奔潰.
通過 React,在重載組件的同時保持組件狀態已經成為可能,從此不再痛苦!
關于如何搭建hot reload,可參考 react-transform-boilerplate.

前面有提到過,我們在 React.js 組件中使用 JSX,然后使用 Babel.js 進行編譯.

Babel 的能力遠不止這些,它也可以讓我們現在就可以給瀏覽器編寫 ES6/ES2015 代碼.在RisingStack,我們在服務器端和客戶端都使用了ES2015的特性,ES2015已經可以在最新的LTS Node.js版本中使用了.

或許你已經給你的 JavaScript 代碼制定了代碼規范,但是你知道也有用于 React 的代碼規范了嗎？我們建議你選擇一個代碼規范,然后照著它說的來做.
在 RisingStack,我們也將 linters 強制運行在 CI 系統上,git push 亦然.可以試試 pre-push 或者 pre-commit.
我們使用標準的 JavaScript 代碼風格,并使用 eslint-plugin-react 來檢查React.js代碼.
(是的,我們已經不再使用分號了)

相對而言 GraphQL 和 Relay 還屬于新技術,在 RisingStack,我們還沒有在產品環境中使用它們,但保持關注.
我們寫過一個 Relay 的 MongoDB ORM 庫,叫做 graffiti,可以使用你已有的 mongoose models 來創建 GraphQL server.
如果你想要學習這些新技術,我們建議你可以找來玩一玩.

有些優秀的技術和庫其實跟React都幾乎沒關系,但要關注社區的其他人都在做些什么.2015這一年,React社區被 Elm 架構啟發了很多.
如果你知道其它在2016年必要的 React.js 工具,請在下面給我們留言!

原文作者：Peter Marton，RisingStack技術總監
原文鏈接：https://blog.risingstack.com/...
翻譯自力譜宿云LeapCloud團隊_UX組成員：Jason
關于MaxLeap
MaxLeap移動云服務平臺為企業提供一站式的移動研發和運營云服務，幫助企業快速研發和上線移動應用，平臺提供數據云存儲，云引擎，支付管理，IM，數據分析和營銷自動化等服務。
MaxLeap官網鏈接： https://maxleap.cn
歡迎關注微信公眾號：MaxLeap_yidongyanfa