## 方法順序遵循生命周期放在前面,?`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 類`。這樣有利于測試,因為這些測試框架要求一個文件導出的就是一個函數。
*注意:你依然可以在一個文件中定義多個類,只要保證導出的只有一個即可。*