react

Airbnb React/JSX Style Guide

一份彙整了在 React 及 JSX 中被普遍使用的風格指南。

目錄

1. 基本規範
2. 命名
3. 宣告
4. 對齊
5. 引號
6. 空格
7. Props
8. 括號
9. 標籤
10. 方法
11. 排序

基本規範

• 一個檔案只包含一個 React 元件。
• 總是使用 JSX 語法。
• 請別使用 React.createElement ，除非你從一個不轉換 JSX 的檔案初始化。

Class vs React.createClass

• 使用類別繼承 React.Component，除非你有一個非常好的理由才使用 mixins

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

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

命名

• 副檔名：React 元件的副檔名請使用 jsx。

• 檔案名稱：檔案名稱請使用帕斯卡命名法。例如：ReservationCard.jsx。

• 參考命名規範: React 元件請使用帕斯卡命名法，元件的實例則使用駝峰式大小寫：

  // 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')

宣告

• 不要使用 displayName 來命名元件，請使用參考來命名元件。

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

對齊

• JSX 語法請遵循以下的對齊風格

  // bad
  <Foo superLongParam="bar"
       anotherSuperLongParam="baz" />
  
  // good
  <Foo
    superLongParam="bar"
    anotherSuperLongParam="baz"
  />
  
  // 如果 props 適合放在同一行，就將它們放在同一行上
  <Foo bar="bar" />
  
  // 通常子元素必須進行縮排
  <Foo
    superLongParam="bar"
    anotherSuperLongParam="baz"
  >
    <Spazz />
  </Foo>

引號

• 總是在 JSX 的屬性使用雙引號（"），但是所有的 JS 請使用單引號。

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

空格

• 總是在自身結尾標籤前加上一個空格。

  // bad
  <Foo/>
  
  // very bad
  <Foo                 />
  
  // bad
  <Foo
   />
  
  // good
  <Foo />

Props

• 總是使用駝峰式大小寫命名 prop。

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

括號

• 當 JSX 的標籤有多行時請使用括號將它們包起來：

  /// bad
  render() {
    return <MyComponent className="long body" foo="bar">
             <MyChild />
           </MyComponent>;
  }
  
  // good
  render() {
    return (
      <MyComponent className="long body" foo="bar">
        <MyChild />
      </MyComponent>
    );
  }
  
  // good, 當只有一行
  render() {
    const body = <div>hello</div>;
    return <MyComponent>{body}</MyComponent>;
  }

標籤

• 沒有子標籤時總是使用自身結尾標籤。

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

• 如果你的元件擁有多行屬性，結尾標籤請放在新的一行。

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

方法

• React 元件的內部方法不要使用底線當作前綴。

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

排序

• 類別繼承 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

• How to define propTypes, defaultProps, contextTypes, etc...

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

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

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

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;

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

⬆ 回到頂端