摘要：部門組件開發規范適用范圍部門所有基于開發的包含組件，歡迎提意見。必須書寫，規定每個可接受屬性的類型，并對加以說明。更多的通用組件規范基本的書寫規范基礎上，更多的通用的組件開發規范。可以提供與組件內部數據結構緊密相關的操作方法。

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

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

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

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

應該/建議：表示一般情況下應該這樣做，但是在某些特定情況下可以忽視這個要求。

應該不/不建議：表示一般情況下不應該這樣做，但是在某些特定情況下可以忽視這個要求。

可以：表示這個要求完全是可選的，你可以這樣做，也可以不這樣做。

實例化生命周期

getDefaultProps

getInitialState

componentWillMount

render

componentDidMount

更新期生命周期

getInitialState

componentWillMount

render

componentDidMount

運行期生命周期

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

render

componentDidUpdate

銷毀期生命周期

componentWillUnmount

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

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

參考：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
    

    // good
    

    // if props fit in one line then keep it on the same line
    

    // children get indented normally
    
      
    

必須在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
    

    // good
    

    // bad
    

    // good
    

必須在自關閉標簽前加一個空格。

    // bad
    

    // very bad
    

    // bad
    

    // good
    

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

必須使用camalCase來命名props。

    // bad
    

    // good
    

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

    // bad
    

必須在DOM片段前后加一對括號()，當DOM片段在一行以上時。

    // bad
    render() {
      return 
               
             ;
    }

    // good
    render() {
      return (
        
          
        
      );
    }

    // good, when single line
    render() {
      const body = 
hello
;
      return {body};
    }

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

    // bad
    

    // good
    

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

    // bad
    

    // good
    

必須將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 

      }
    }

    // good
    class extends React.Component {
      constructor(props) {
        super(props);

        this.onClickDiv = this.onClickDiv.bind(this);
      }

      onClickDiv() {
        // do stuff
      }

      render() {
        return 

      }
    }

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

displayName

propTypes

contextTypes

childContextTypes

mixins

statics

defaultProps

getDefaultProps

getInitialState

getChildContext

componentWillMount

componentDidMount

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

componentDidUpdate

componentWillUnmount

clickHandlers or eventHandlers like onClickSubmit() or onChangeDescription()

getter methods for render like getSelectReason() or getFooterContent()

Optional render methods like renderNavigation() or renderProfilePicture()

render

[基本的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/