React编码规范

• 文件名: 文件命名采用帕斯卡命名法，如：ReservationCard.jsx
• 引用名: 组件引用采用帕斯卡命名法，其实例采用驼峰式命名法
  如：const ReservationCard = require('./ReservationCard');const reservationItem = <ReservationCard />;
• 引号：对于 JSX 使用双引号，对其它所有 JS 属性使用单引号
  如：<Foo bar="bar" />
  <Foo style={{ left: '20px' }} />
• 标签：在自闭和标签之前留一个空格 如：<Foo />
• 属性名：采用驼峰式命名法
  如：<Foo
  userName="hello"
  phoneNumber={12345678}
  />
• 当组件跨行时，要用括号包裹 JSX 标签
  如：render() {
  return (
  <MyComponent className="long body" foo="bar">
  <MyChild />
  </MyComponent>
  );
  }
• 没有子组件的父组件使用自闭和标签
  如： <Foo className="stuff" />
• 如果组件有多行属性，闭合标签应写在新的一行上。
  如： <Foo
  bar="bar"
  baz="baz"
  />
• 不要对 React 组件的内置方法使用“_”前缀
• 顺序：继承 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