React 编程风格指南

本文讨论的是 @H_502_1@React.js 编程中的一些编程风格，团队开发中遵循统一的风格有利于提高代码的阅读体验。
本文译自React style guide。下面将从三个方面来讲。

语法

方法顺序遵循生命周期放在前面， @H_502_1@render() 方法放在最后

在 @H_502_1@react 组件内部，方法的顺序如下：

生命周期方法（按照时间先后顺序依次为： @H_502_1@getDefaultProps,@H_502_1@getInitialState,@H_502_1@componentWillMount,@H_502_1@componentDidMount,@H_502_1@componentWillReceiveProps,@H_502_1@shouldComponentUpdate,@H_502_1@componentWillUpdate,@H_502_1@componentDidUpdate,@H_502_1@componentWillUnmount ）
其他的方法
@H_502_1@render 方法

事件处理函数的命名

采用 "handle" + "EventName" 的方式来命名
Example：

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

事件函数作为属性时的命名

为了跟 @H_502_1@react 的事件命名保持一致： @H_502_1@onClick,@H_502_1@onDrag,@H_502_1@onChange,等等，采用如下格式：

<Component onLaunchMissiles={this.handleLaunchMissiles} />

元素跟 @H_502_1@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 类

每一个 @H_502_1@.jsx 应该只能导出单独的 @H_502_1@react 类。这样有利于测试，因为这些测试框架要求一个文件导出的就是一个函数。
注意：你依然可以在一个文件中定义多个类，只要保证导出的只有一个即可。

语言特色

确保“呈现型”的组件功能单一

把 @H_502_1@react 组件分为“逻辑型组件”和“呈现型组件” 是很有必要的。前者包含的是业务逻辑，里面不应该包含HTML；后者一般是可复用的，可以包含HTML。前者可以拥有自己的内部的 @H_502_1@state，而后者不应该拥有。

多用 props

如果能用 @H_502_1@props 就不要用 @H_502_1@state，这一定程度上可以减少应用程序的复杂度。
一般的模式是：创建一个“无状态”的组件（呈现型组件），只负责呈现数据，把包含 @H_502_1@state 的“逻辑型组件”做为这些组件的父级组件。然后把它内部的 @H_502_1@state 作为 @H_502_1@props传递给下面的呈现型组件。这些逻辑型组件包含了所有的交互逻辑。

使用 propTypes

@H_502_1@react 组件都应该完成 @H_502_1@propTypes 验证。每一个 @H_502_1@this.props 的属性都应该有一个与之对应的 @H_502_1@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

不要通过 @H_502_1@data- 属性或class类。所有的信息应该都存储在javascript中，或者在React组件中，或者在React store 中，如果使用了类似 @H_502_1@Redux 这样的框架的话。

React 库和组件

不要使用 backbone 模型

直接使用 flux action，或者 @H_502_1@$.ajax 来代替。

尽量少用 jQuery 就少用

永远也不要用jquery去操作DOM。
尝试避免jquery插件的使用。有必要的话，把jquery插件包装在React组件中。
你可以使用 @H_502_1@$.ajax（但是不要用其他方法，像 @H_502_1@$.post）来进行网络通信。

复用组件

你可以从https://devarchy.com/react 获取第三方React组件。