React組內開發規範

下面是咱們部門總結的內部開發規範（試行版本），歡迎提意見。

部門FE React 組件開發規範

適用範圍

部門FE 全部基於React開發的（包含fcui2）組件，歡迎提意見。

要求

• 必須：表示絕對要求這樣作。

• 必須不：表示絕對不要求這樣作。

• 應該/建議：表示通常狀況下應該這樣作，可是在某些特定狀況下能夠忽視這個要求。

• 應該不/不建議：表示通常狀況下不該該這樣作，可是在某些特定狀況下能夠忽視這個要求。

• 能夠：表示這個要求徹底是可選的，你能夠這樣作，也能夠不這樣作。

基本概念 [basic-concepts]

• 實例化生命週期

  • getDefaultProps

  • getInitialState

  • componentWillMount

  • render

  • componentDidMount

• 更新期生命週期

  • getInitialState

  • componentWillMount

  • render

  • componentDidMount

• 運行期生命週期

  • componentWillReceiveProps

  • shouldComponentUpdate

  • componentWillUpdate

  • render

  • componentDidUpdate

• 銷燬期生命週期

  • componentWillUnmount

核心依賴 [deps]（針對內部UI庫）

• 必須在UI內只依賴React，underscore。

• 必須不在UI內部任何地方使用jQuery等直接操做DOM的庫

JSX書寫 [jsx]

參考：Airbnb的style guide。

• 必須命名JSX文件爲.jsx.js。

• 必須使用PascalCase做爲文件名。

• 必須只包含一個React Component在一個JSX文件中。

• 必須令文件名與所包含的React Component名字相同。

• 必須只能使用React.createClass()來建立一個React Component。

  > 雖然ES6 Class和pure function均可以建立React Component，
  > 但ES6 Class不能使用mixin作擴展，與目前的擴展方法衝突；
  > Pure function較難掌握和管理。

• 必須使用JSX語法來生成組件的DOM片斷。

• 必須不能在JSX中出現React.createElement()。

• 必須遵照下面示例中的DOM片斷對齊方式。

// 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"
    >
      <Quux />
    </Foo>

• 必須在DOM片斷中使用雙引號"。

  > Why？JSX attributes [can't contain escaped quotes](http://eslint.org/docs/rules/jsx-quotes), so double quotes make conjunctions like `"don't"` easier to type.
  
  > Regular HTML attributes also typically use double quotes instead of single, so JSX attributes mirror this convention.

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

• 必須書寫propTypes，規定每一個可接受屬性的類型，並對propTypes加以jsdoc說明。

• 必須使用camalCase來命名props。

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

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

• 必須當props的值爲字面值true時，省略={true}。

// bad
    <Foo
      hidden={true}
    />

    // good
    <Foo
      hidden
    />

• 必須在DOM片斷先後加一對括號()，當DOM片斷在一行以上時。

// 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>;
    }

• 必須將組件寫成自關閉標籤，當組件沒有children時。

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

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

• 必須將關閉標籤另起一行，當組件有多個props時。

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

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

• 必須將bind handler到this的動做放到構造函數中。

  > Why? A bind call in the render path creates a brand new function on every single render.

// 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} />
      }
    }

• 必須以以下的順序排列JSX文件中的方法。

  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

更多的通用組件規範 [general-guide]

[基本的JSX書寫規範] (#jsx-jsx)基礎上，更多的通用的React組件開發規範。

• 必須將全部UI組件實現爲[Pure Renderer] (https://facebook.github.io/react/docs/pure-render-mixin.html)。

• 必須在props中存放全部外部導入的配置，包括顯示控制參數、顯示數據源、當前值（若是是input類型組件）、回調方法等。state相同時，對於一個特定的props，對應的組件展示結果惟一。

• 必須在state中存放組件運行期的狀態，如輸入框是否經過了校驗、鼠標是否懸浮在按鈕上等。props相同時，對於一組特定的state，對應的組件展示效果惟一。

• 不該該在state中存在[經過props運算來的屬性] (https://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html)。

• 建議父子關係的組件間傳遞props時，使用[rest-spread語法] (https://facebook.github.io/react/docs/transferring-props.html)。

• 必須僅在實例化生命週期中綁定window或body事件。

• 必須在銷燬期生命週期中解綁window或body事件。

• 必須不容許在運行期生命週期中聲明表達式函數。bind函數也不容許。

// bad
    render() {
        var cleverFunction = function () {};
        // ...
    }

    // good
    {
        cleverFunction() {},
        render() {
            // just use this.cleverFunction
        }
    }

• 不建議在運行期生命週期中使用時間複雜度O(n²)及以上階的算法。

• 必須不容許出現觀察者模式，如自定義addEventListener方法，或on, fire等。

• 必須只能經過如下2種方法設置組件內部狀態：

  • 經過父組件的render方法，改變子組件的props。

  • 經過子組件的setState方法。

• 必須不容許爲組件提供setXXX方法來改變其內部狀態，除非該setXXX方法中僅包含一個setState調用，且完成了一個充分複雜的state轉換。

• 必須爲全部回調在getDefaultProps給出空函數默認值_.noop。

• 能夠提供與組件內部數據結構緊密相關的操做方法。這些方法能夠實現爲一個純函數，即只依賴其全部的參數來獲得其結果。這些方法能夠放在組件的static域中。

博客地址

http://tangguangyao.github.io/

微信公衆號