前端之React实战-代码规范

Coding Style(编码风格)

Basic Rules(基本原则)

• 每个文件中只包含一个React组件。

• 尽可能地使用JSX语法。

• 除非不用JSX语法创建一个应用，否则不要使用React.createElement方法。

Component(组件规范)

Class 与 React.createClass方法

尽可能地使用ES6中的类的语法，除非有特殊的对于Mixin的需求。

// bad
const Listing = React.createClass({
  render() {
    return <div />;
  }
});

// good
class Listing extends React.Component {
  render() {
    return <div />;
  }
}

组件命名

• 扩展名：使用.jsx作为React组件的扩展名。

• 文件名：使用帕斯卡命名法命名文件，譬如ReservationCard.jsx。

• 引用命名：使用帕斯卡命名法命名组件和camelCase命名实例。

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

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

// bad
const ReservationItem = <ReservationCard />;

// good
const reservationItem = <ReservationCard />;

Declaration(声明)

• 不要使用displayName来命名组件，而使用引用。

// bad
export default React.createClass({
  displayName: 'ReservationCard',// stuff goes here
});

// good
export default class ReservationCard extends React.Component {
}

Props

• 对于Props的命名使用camelCase。

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

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

• 将Props或者State的声明写在类外。

import React,{ Component,PropTypes } from 'react';

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

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

export default class Link extends 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;

JSX(JSX规范)

Alignment(对齐)

• 跟随如下的JSX的语法

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

// good
<Foo
  superLongParam="bar"
  anotherSuperLongParam="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>

Quotes

对于JSX的属性用双引号表示，对于其他属性，用单引号表示。

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

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

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

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

Spacing(空格)

• 在自闭合的标签中仅使用单空格。

// bad
<Foo/>

// very bad
<Foo                 />

// bad
<Foo
 />

// good
<Foo />

多段

• 当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>;
}

Methods

Naming(方法命名)

• 对于一个React组件的内部方法，不要使用下划线作为前缀。

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

  // other stuff
});

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

  // other stuff
});

Ordering(顺序)

1. React.Component子类

2. constructor

3. optional static methods

4. getChildContext

5. componentWillMount

6. componentDidMount

7. componentWillReceiveProps

8. shouldComponentUpdate

9. componentWillUpdate

• 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

• 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