Airbnb React/JSX 编码规范

算是最合理的React/JSX编码规范之一了

此编码规范主要基于目前流行的JavaScript标准，尽管某些其他约定(如async/await，静态class属性)可能在不同的项目中被引入或者被禁用。目前的状态是任何stage-3之前的规范都不包括也不推荐使用。

内容目录

1. 基本规范
2. Class vs React.createClass vs stateless
3. Mixins
4. 命名
5. 声明模块
6. 代码对齐
7. 单引号还是双引号
8. 空格
9. 属性
10. Refs引用
11. 括号
12. 标签
13. 函数/方法
14. 模块生命周期
15. isMounted

Basic Rules 基本规范

• 每个文件只写一个模块.

  • 但是多个无状态模块可以放在单个文件中. eslint: react/no-multi-comp.
• 推荐使用JSX语法.
• 不要使用 React.createElement，除非从一个非JSX的文件中初始化你的app.

创建模块

Class vs React.createClass vs stateless

• 如果你的模块有内部状态或者是refs, 推荐使用 class extends React.Component 而不是 React.createClass.
  eslint: react/prefer-es6-class react/prefer-stateless-function ```jsx // bad const Listing = React.createClass({ // … render() { return
  {this.state.hello}
  ; } });

// good class Listing extends React.Component { // … render() { return

<br />如果你的模块没有状态或是没有引用`refs`， 推荐使用普通函数（非箭头函数）而不是类:
```jsx
// bad
class Listing extends React.Component {
  render() {
    return <div>{this.props.hello}</div>;
  }
}
// bad (relying on function name inference is discouraged)
const Listing = ({ hello }) => (
  <div>{hello}</div>
);
// good
function Listing({ hello }) {
  return <div>{hello}</div>;
}

Mixins

• 不要使用 mixins.

为什么? Mixins 会增加隐式的依赖，导致命名冲突，并且会以雪球式增加复杂度。在大多数情况下Mixins可以被更好的方法替代，如：组件化，高阶组件，工具模块等。

Naming 命名

• 扩展名: React模块使用 .jsx 扩展名.

• 文件名: 文件名使用帕斯卡命名. 如, ReservationCard.jsx.

• 引用命名: React模块名使用帕斯卡命名，实例使用骆驼式命名. eslint: react/jsx-pascal-case ```jsx // bad import reservationCard from ‘./ReservationCard’;

// good import ReservationCard from ‘./ReservationCard’;

// bad const ReservationItem = ;

// good const reservationItem = ;

- 
**模块命名**: 模块使用当前文件名一样的名称. 比如 `ReservationCard.jsx` 应该包含名为 `ReservationCard`的模块. 但是，如果整个文件夹是一个模块，使用 `index.js`作为入口文件，然后直接使用 `index.js` 或者文件夹名作为模块的名称:
```jsx
// bad
import Footer from './Footer/Footer';
// bad
import Footer from './Footer/index';
// good
import Footer from './Footer';

• 高阶模块命名: 对于生成一个新的模块，其中的模块名 displayName 应该为高阶模块名和传入模块名的组合. 例如, 高阶模块 withFoo(), 当传入一个 Bar 模块的时候， 生成的模块名 displayName 应该为 withFoo(Bar).

  为什么？一个模块的 displayName 可能会在开发者工具或者错误信息中使用到，因此有一个能清楚的表达这层关系的值能帮助我们更好的理解模块发生了什么，更好的Debug.

// bad
export default function withFoo(WrappedComponent) {
  return function WithFoo(props) {
    return <WrappedComponent {...props} foo />;
  }
}
// good
export default function withFoo(WrappedComponent) {
  function WithFoo(props) {
    return <WrappedComponent {...props} foo />;
  }
  const wrappedComponentName = WrappedComponent.displayName
    || WrappedComponent.name
    || 'Component';
  WithFoo.displayName = `withFoo(${wrappedComponentName})`;
  return WithFoo;
}

• 属性命名: 避免使用DOM相关的属性来用作其他的用途。

  为什么？对于style 和 className这样的属性名，我们都会默认它们代表一些特殊的含义，如元素的样式，CSS class的名称。在你的应用中使用这些属性来表示其他的含义会使你的代码更难阅读，更难维护，并且可能会引起bug。

// bad
<MyComponent style="fancy" />
// good
<MyComponent variant="fancy" />

Declaration 声明模块

• 不要使用 displayName 来命名React模块，而是使用引用来命名模块， 如 class 名称. ```jsx // bad export default React.createClass({ displayName: ‘ReservationCard’, // stuff goes here });

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

<a name="fa61f477"></a>
## Alignment 代码对齐
- 
遵循以下的JSX语法缩进/格式. eslint: [`react/jsx-closing-bracket-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md) [`react/jsx-closing-tag-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-tag-location.md)
```jsx
// bad
<Foo superLongParam="bar"
     anotherSuperLongParam="baz" />
// good, 有多行属性的话, 新建一行关闭标签
<Foo
  superLongParam="bar"
  anotherSuperLongParam="baz"
/>
// 若能在一行中显示, 直接写成一行
<Foo bar="bar" />
// 子元素按照常规方式缩进
<Foo
  superLongParam="bar"
  anotherSuperLongParam="baz"
>
  <Quux />
</Foo>

Quotes 单引号还是双引号

• 对于JSX属性值总是使用双引号("), 其他均使用单引号('). eslint: jsx-quotes

  为什么? HTML属性也是用双引号, 因此JSX的属性也遵循此约定.

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

Spacing 空格

• 总是在自动关闭的标签前加一个空格，正常情况下也不需要换行. eslint: no-multi-spaces, react/jsx-tag-spacing ```jsx // bad

// very bad

- 
如果模块有多行的属性， 关闭标签时新建一行. eslint: [`react/jsx-closing-bracket-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md)
```jsx
// bad
<Foo
  bar="bar"
  baz="baz" />
// good
<Foo
  bar="bar"
  baz="baz"
/>

// bad
class extends React.Component {
  onClickDiv() {
    // do stuff
  }
  render() {
    return <div onClick={this.onClickDiv.bind(this)} />;
  }
}
// good
class extends React.Component {
  constructor(props) {
    super(props);
    this.onClickDiv = this.onClickDiv.bind(this);
  }
  onClickDiv() {
    // do stuff
  }
  render() {
    return <div onClick={this.onClickDiv} />;
  }
}

// bad
React.createClass({
  _onClickSubmit() {
    // do stuff
  },
  // other stuff
});
// good
class extends React.Component {
  onClickSubmit() {
    // do stuff
  }
  // other stuff
}

<a name="e6fe9da0"></a>
## Ordering React 模块生命周期
- `class extends React.Component` 的生命周期函数:
1. 可选的 `static` 方法
2. `constructor` 构造函数
3. `getChildContext` 获取子元素内容
4. `componentWillMount` 模块渲染前
5. `componentDidMount` 模块渲染后
6. `componentWillReceiveProps` 模块将接受新的数据
7. `shouldComponentUpdate` 判断模块需不需要重新渲染
8. `componentWillUpdate` 上面的方法返回 `true`， 模块将重新渲染
9. `componentDidUpdate` 模块渲染结束
10. `componentWillUnmount` 模块将从DOM中清除, 做一些清理任务
11. _点击回调或者事件处理器_ 如 `onClickSubmit()` 或 `onChangeDescription()`
12. _`render` 里的 getter 方法_ 如 `getSelectReason()` 或 `getFooterContent()`
13. _可选的 render 方法_ 如 `renderNavigation()` 或 `renderProfilePicture()`
14. `render` render() 方法
- 
如何定义 `propTypes`, `defaultProps`, `contextTypes`, 等等其他属性...
```jsx
import React from 'react';
import PropTypes from 'prop-types';
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;