React 編程風格指南

本文討論的是 React.js 編程中的一些編程風格，團隊開發中遵循統一的風格有利於提升代碼的閱讀體驗。
本文譯自React style guide。下面將從三個方面來說。

語法

方法順序遵循生命週期放在前面， render() 方法放在最後

在 react 組件內部，方法的順序以下：

1. 生命週期方法（按照時間前後順序依次爲： getDefaultProps, getInitialState, componentWillMount, componentDidMount, componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate, componentDidUpdate, componentWillUnmount ）

2. 其餘的方法

3. render 方法

事件處理函數的命名

採用 "handle" + "EventName" 的方式來命名
Example：

<Component onClick={this.handleClick} onLaunchMissiles={this.handleLaunchMissiles} />

事件函數做爲屬性時的命名

爲了跟 react 的事件命名保持一致： onClick, onDrag, onChange, 等等，採用以下格式：

<Component onLaunchMissiles={this.handleLaunchMissiles} />

元素跟 return 放在同一行

爲了節約空間，採用下面的寫法：

return <div>
    ...
</div>;

而不是：

return (      // "div" 與 "return" 不在同一行
    <div>
        ...
    </div>
);

對HTML的屬性進行對齊和排序

若是屬性不是太多，那就放在同一行，不然就把每個屬性都單獨寫一行：

<div className="highlight" key="highlight-div">
<div
    className="highlight"
    key="highlight-div"
>
<Image
    className="highlight"
    key="highlight-div"
/>

而不是：

<div className="highlight"      // 屬性沒有在單獨行
     key="highlight-div"
>
<div                            // 閉合便籤不在單獨的行
    className="highlight"
    key="highlight-div">
<div                            // 屬性沒有排序（通常重要的屬性寫在前面）
    key="highlight-div"
    className="highlight"
>

一個文件只導出一個 react 類

每個 .jsx 應該只能導出單獨的 react 類。這樣有利於測試，由於這些測試框架要求一個文件導出的就是一個函數。
注意：你依然能夠在一個文件中定義多個類，只要保證導出的只有一個便可。

語言特點

確保「呈現型」的組件功能單一

把 react 組件 分爲「邏輯型組件」和「呈現型組件」 是頗有必要的。前者包含的是業務邏輯，裏面不該該包含HTML；後者通常是可複用的，能夠包含HTML。前者能夠擁有本身的內部的 state，然後者不該該擁有。

多用 props

若是能用 props 就不要用 state，這必定程度上能夠減小應用程序的複雜度。
通常的模式是：建立一個「無狀態」的組件（呈現型組件），只負責呈現數據，把包含 state 的「邏輯型組件」作爲這些組件的父級組件。 而後把它內部的 state 做爲 props傳遞給下面的呈現型組件。這些邏輯型組件包含了全部的交互邏輯。

使用 propTypes

react 組件 都應該完成 propTypes 驗證。每個 this.props 的屬性都應該有一個與之對應的 propTypes。
避免使用這些沒有描述意義的 prop-types:

• React.PropTypes.any

• React.PropTypes.array

• React.PropTypes.object

最好使用：

• React.PropTypes.arrayOf

• React.PropTypes.objectOf

• React.PropTypes.instanceOf

• React.PropTypes.shape

永遠不要在DOM中保存 state

不要經過 data- 屬性或class類。全部的信息應該都存儲在javascript中，或者在React組件中，或者在React store 中，若是使用了相似 Redux 這樣的框架的話。

React 庫和組件

不要使用 backbone 模型

直接使用 flux action，或者 $.ajax 來代替。

儘可能少用 jQuery 就少用

永遠也不要用jquery去操做DOM。
嘗試避免jquery插件的使用。有必要的話，把jquery插件包裝在React組件中。
你可使用 $.ajax（可是不要用其餘方法，像 $.post） 來進行網絡通訊。

複用組件

你能夠從https://devarchy.com/react獲取第三方React組件。