React开发编码规范

React是一个用于构建用户界面的JAVASCRIPT库。

目的

• 对公司内部使用React开发编程进行规范和统一，提高程序的可靠性、可读性、可维护性，提高团队开发效率。

Declarative：声明式设计

• React可以轻松地构建交互式用户界面。在应用程序中设计每个状态的简单视图，并且在数据发生变化时，react可以有效地更新和渲染正确的组件。
• 声明式视图可以使你的代码更加的可预测和调试。

Component-Based：基于组件的

• 通过封装组件来管理它们自己的状态，然后组合它们来生成复杂的UI。
• 由于组件逻辑是用JavaScript而不是模板编写的，因此您可以轻松地通过应用程序传递丰富的数据，并将状态保存在DOM之外。

Learn Once, Write Anywhere：

• 我们不会对您的技术栈的其余部分做出任何假设，因此您可以在不重写现有代码的情况下开发新的特性。
• React也可以使用Node来做服务端渲染，并且可以使用React Native开发强大的移动端应用。

基础规范

• 统一全部采用ES6语法
• 统一使用 js 作为React组件的扩展名
• 使用 JSX 语法

命名规范

• 文件名: 文件命名采用大驼峰式命名法，如：ReservationCard.jsx
• 引用名: 组件引用采用大驼峰式命名法，其实例采用小驼峰式命名法。

// bad
const reservationCard = require('./ReservationCard');

// good
const ReservationCard = require('./ReservationCard');

// bad
const ReservationItem = <ReservationCard />;

// good
const reservationItem = <ReservationCard />;

• 组件命名: 使用文件名作为组件名。例如：ReservationCard.jsx 组件的引用名应该是 ReservationCard。然而，对于一个目录的根组件，应该使用 index.jsx 作为文件名，使用目录名作为组件名。

// bad
const Footer = require('./Footer/Footer.jsx')

// bad
const Footer = require('./Footer/index.jsx')

// good
const Footer = require('./Footer')

• 属性名称: 采用小驼峰式命名法

// bad
<Foo
  UserName="hello"
  phone_number={12345678}
/>

// good
<Foo
  userName="hello"
  phoneNumber={12345678}
/>

• 事件处理函数： 统一使用handle前缀，如handleSomething

• 自定义事件属性名称： 统一使用on前缀，如onSomething={this.handleSomething}

• key： 不能使用数组index，构造或使用唯一的id

• 组件方法名称： 不要对 React 组件的内置方法使用 underscore （下划线）前缀

// bad
React.createClass({
  _onClickSubmit() {
    // do stuff
  }

  // other stuff
});

// good
class extends React.Component {
  onClickSubmit() {
    // do stuff
  }

  // other stuff
});

标签

• 在自闭和标签之前留一个空格

// bad
<Foo/>

// very bad
<Foo                 />

// bad
<Foo
 />

// good
<Foo />

• 没有子组件的父组件使用自闭和标签。

// bad
  <Foo className="stuff"></Foo>

  // good
  <Foo className="stuff" />

• 如果组件有多行属性，闭合标签应写在新的一行上。

// bad
  <Foo
    bar="bar"
    baz="baz" />

  // good
  <Foo
    bar="bar"
    baz="baz"
  />

对齐

// if props fit in one line then keep it on the same line
<Foo bar="bar" />

// children get indented normally
<Foo
  superLongParam="bar"
  anotherSuperLongParam="baz"
>
  <Spazz />
</Foo>

返回

// bad
render() {
  return <MyComponent className="long body" foo="bar">
           <MyChild />
         </MyComponent>;
}

// good
render() {
  return (
    <MyComponent className="long body" foo="bar">
      <MyChild />
    </MyComponent>
  );
}

// good, when single line
render() {
  const body = <div>hello</div>;
  return <MyComponent>{body}</MyComponent>;
}

引号

• 对于 JSX 使用双引号，对其它所有 JS 属性使用单引号

为什么？因为 JSX 属性不能包含被转移的引号，并且双引号使得如 "don't" 一样的连接词很容易被输入。常规的 HTML 属性也应该使用双引号而不是单引号，JSX 属性反映了这个约定。

 // bad
  <Foo bar='bar' />

  // good
  <Foo bar="bar" />

  // bad
  <Foo style={{ left: "20px" }} />

  // good
  <Foo style={{ left: '20px' }} />

括号

• 当组件跨行时，要用括号包裹 JSX 标签。

/// bad
  render() {
    return <MyComponent className="long body" foo="bar">
             <MyChild />
           </MyComponent>;
  }

  // good
  render() {
    return (
      <MyComponent className="long body" foo="bar">
        <MyChild />
      </MyComponent>
    );
  }

  // good, when single line
  render() {
    const body = <div>hello</div>;
    return <MyComponent>{body}</MyComponent>;
  }

顺序

• 继承 React.Component 的类的方法遵循下面的顺序

1. constructor
2. optional static methods
3. getChildContext
4. componentWillMount
5. componentDidMount
6. componentWillReceiveProps
7. shouldComponentUpdate
8. componentWillUpdate
9. componentDidUpdate
10. componentWillUnmount
11. clickHandlers or eventHandlers like onClickSubmit() or onChangeDescription()
12. getter methods for render like getSelectReason() or getFooterContent()
13. Optional render methods like renderNavigation() or renderProfilePicture()
14. render

• 怎么定义 propTypes，defaultProps，contextTypes 等等...

import React, { PropTypes } from 'react';

const propTypes = {
  id: PropTypes.number.isRequired,
  url: PropTypes.string.isRequired,
  text: PropTypes.string,
};

const defaultProps = {
  text: 'Hello World',
};

class Link extends React.Component {
  static methodsAreOk() {
    return true;
  }

  render() {
    return <a href={this.props.url} data-id={this.props.id}>{this.props.text}</a>
  }
}

Link.propTypes = propTypes;
Link.defaultProps = defaultProps;

export default Link;

• 使用 React.createClass 时，方法顺序如下：

1. displayName
2. propTypes
3. contextTypes
4. childContextTypes
5. mixins
6. statics
7. defaultProps
8. getDefaultProps
9. getInitialState
10. getChildContext
11. componentWillMount
12. componentDidMount
13. componentWillReceiveProps
14. shouldComponentUpdate
15. componentWillUpdate
16. componentDidUpdate
17. componentWillUnmount
18. clickHandlers or eventHandlers like onClickSubmit() or onChangeDescription()
19. getter methods for render like getSelectReason() or getFooterContent()
20. Optional render methods like renderNavigation() or renderProfilePicture()
21. render

代码审查

• 使用ESLint检查代码