render( )
方法放在最后在 react
组件内部,方法的顺序如下:
getDefaultProps,
getInitialState,
componentWillMount,
componentDidMount,
componentWillReceiveProps,
shouldComponentUpdate,
componentWillUpdate,
componentDidUpdate,
componentWillUnmount
采用 handle
+ EventName
的方式来命名,像下面这样:
<Component onClick={this.handleClick} onLaunchMissiles={this.handleLaunchMissiles} />
为了跟 react
的事件命名保持一致: onClick
, onDrag
, onChange
, 等等,采用下面的格式:
<Component onLaunchMissiles={this.handleLaunchMissiles}/>
为了节约空间,采用下面的写法:
return <div>
...
</div>;
而不是:
return ( // "div" 与 "return" 不在同一行
<div>
...
</div>
);
如果属性不是太多,那就放在同一行,否则就把每一个属性都单独写一行:
<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"
>
每一个 .jsx
应该只能导出单独的 react
类。这样有利于测试,因为这些测试框架要求一个文件导出的就是一个函数。
把 react
组件 分为 “逻辑型组件” 和“呈现型组件” 是很有必要的。前者包含的是业务逻辑,里面不应该包含 HTML;后者一般是可复用的,可以包含 HTML。前者可以拥有自己的内部的 state
,而后者不应该拥有。
props
如果能用 props
就不要用 state
,这一定程度上可以减少应用程序的复杂度。
一般的模式是:创建一个 “无状态” 的组件(呈现型组件),只负责呈现数据,把包含 state
的 “逻辑型组件” 做为这些组件的父级组件,然后把它内部的 state
作为 props
传递给下面的呈现型组件,这些逻辑型组件包含了所有的交互逻辑。
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
不要通过 data-
属性或 class
类。所有的信息应该都存储在 javascript
中,或者在 React
组件中,或者在 React store
中,如果使用了类似 Redux
这样的框架的话。
直接使用 flux action
,或者 $.ajax
来代替。
jQuery
就少用永远也不要用 jquery
去操作 DOM
。
尝试避免 jquery
插件的使用。有必要的话,把 jquery
插件包装在 React
组件中。
你可以使用 $.ajax
(但是不要用其他方法,像 $.post
) 来进行网络通信。