React 編程風格指南
本文討論的是React.js編程中的一些編程風格，團隊開發中遵循統一的風格有利于提高代碼的閱讀體驗。
本文譯自 React style guide 。下面將從三個方面來講。
語法
方法順序遵循生命周期放在前面，render()方法放在最后
在react組件內部，方法的順序如下：
-
生命周期方法（按照時間先后順序依次為：getDefaultProps,getInitialState,componentWillMount,componentDidMount,componentWillReceiveProps,shouldComponentUpdate,componentWillUpdate,componentDidUpdate,componentWillUnmount）
-
其他的方法
-
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） 來進行網絡通信。
復用組件
你可以從 react-components.com 獲取第三方React組件。