摘要：部門組件開發(fā)規(guī)范適用范圍部門所有基于開發(fā)的包含組件，歡迎提意見(jiàn)。必須書寫，規(guī)定每個(gè)可接受屬性的類型，并對(duì)加以說(shuō)明。更多的通用組件規(guī)范基本的書寫規(guī)范基礎(chǔ)上，更多的通用的組件開發(fā)規(guī)范?？梢蕴峁┡c組件內(nèi)部數(shù)據(jù)結(jié)構(gòu)緊密相關(guān)的操作方法。

下面是我們部門總結(jié)的內(nèi)部開發(fā)規(guī)范（試行版本），歡迎提意見(jiàn)。

部門FE 所有基于React開發(fā)的（包含fcui2）組件，歡迎提意見(jiàn)。

必須：表示絕對(duì)要求這樣做。

必須不：表示絕對(duì)不要求這樣做。

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

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

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

實(shí)例化生命周期

getDefaultProps

getInitialState

componentWillMount

render

componentDidMount

更新期生命周期

getInitialState

componentWillMount

render

componentDidMount

運(yùn)行期生命周期

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

render

componentDidUpdate

銷毀期生命周期

componentWillUnmount

必須在UI內(nèi)只依賴React，underscore。

必須不在UI內(nèi)部任何地方使用jQuery等直接操作DOM的庫(kù)

參考：Airbnb的style guide。

必須命名JSX文件為.jsx.js。

必須使用PascalCase作為文件名。

必須只包含一個(gè)React Component在一個(gè)JSX文件中。

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

必須只能使用React.createClass()來(lái)創(chuàng)建一個(gè)React Component。

> 雖然ES6 Class和pure function都可以創(chuàng)建React Component，
> 但ES6 Class不能使用mixin做擴(kuò)展，與目前的擴(kuò)展方法沖突；
> Pure function較難掌握和管理。

必須使用JSX語(yǔ)法來(lái)生成組件的DOM片段。

必須不能在JSX中出現(xiàn)React.createElement()。

必須遵守下面示例中的DOM片段對(duì)齊方式。

    // bad
    

    // good
    

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

    // children get indented normally
    
      
    

必須在DOM片段中使用雙引號(hào)"。

> 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
    

必須在自關(guān)閉標(biāo)簽前加一個(gè)空格。

    // bad
    

    // very bad
    

    // bad
    

    // good
    

必須書寫propTypes，規(guī)定每個(gè)可接受屬性的類型，并對(duì)propTypes加以jsdoc說(shuō)明。

必須使用camalCase來(lái)命名props。

    // bad
    

    // good
    

必須當(dāng)props的值為字面值true時(shí)，省略={true}。

    // bad
    

必須在DOM片段前后加一對(duì)括號(hào)()，當(dāng)DOM片段在一行以上時(shí)。

    // bad
    render() {
      return 
               
             ;
    }

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

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

必須將組件寫成自關(guān)閉標(biāo)簽，當(dāng)組件沒(méi)有children時(shí)。

    // bad
    

    // good
    

必須將關(guān)閉標(biāo)簽另起一行，當(dāng)組件有多個(gè)props時(shí)。

    // bad
    

    // good
    

必須將bind handler到this的動(dòng)作放到構(gòu)造函數(shù)中。

> 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書寫規(guī)范] (#jsx-jsx)基礎(chǔ)上，更多的通用的React組件開發(fā)規(guī)范。

必須將所有UI組件實(shí)現(xiàn)為[Pure Renderer] (https://facebook.github.io/react/docs/pure-render-mixin.html)。

必須在props中存放所有外部導(dǎo)入的配置，包括顯示控制參數(shù)、顯示數(shù)據(jù)源、當(dāng)前值（如果是input類型組件）、回調(diào)方法等。state相同時(shí)，對(duì)于一個(gè)特定的props，對(duì)應(yīng)的組件展現(xiàn)結(jié)果唯一。

必須在state中存放組件運(yùn)行期的狀態(tài)，如輸入框是否通過(guò)了校驗(yàn)、鼠標(biāo)是否懸浮在按鈕上等。props相同時(shí)，對(duì)于一組特定的state，對(duì)應(yīng)的組件展現(xiàn)效果唯一。

不應(yīng)該在state中存在[通過(guò)props運(yùn)算來(lái)的屬性] (https://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html)。

建議父子關(guān)系的組件間傳遞props時(shí)，使用[rest-spread語(yǔ)法] (https://facebook.github.io/react/docs/transferring-props.html)。

必須僅在實(shí)例化生命周期中綁定window或body事件。

必須在銷毀期生命周期中解綁window或body事件。

必須不允許在運(yùn)行期生命周期中聲明表達(dá)式函數(shù)。bind函數(shù)也不允許。

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

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

不建議在運(yùn)行期生命周期中使用時(shí)間復(fù)雜度O(n²)及以上階的算法。

必須不允許出現(xiàn)觀察者模式，如自定義addEventListener方法，或on, fire等。

必須只能通過(guò)以下2種方法設(shè)置組件內(nèi)部狀態(tài)：

通過(guò)父組件的render方法，改變子組件的props。

通過(guò)子組件的setState方法。

必須不允許為組件提供setXXX方法來(lái)改變其內(nèi)部狀態(tài)，除非該setXXX方法中僅包含一個(gè)setState調(diào)用，且完成了一個(gè)充分復(fù)雜的state轉(zhuǎn)換。

必須為所有回調(diào)在getDefaultProps給出空函數(shù)默認(rèn)值_.noop。

可以提供與組件內(nèi)部數(shù)據(jù)結(jié)構(gòu)緊密相關(guān)的操作方法。這些方法可以實(shí)現(xiàn)為一個(gè)純函數(shù)，即只依賴其所有的參數(shù)來(lái)得到其結(jié)果。這些方法可以放在組件的static域中。

http://tangguangyao.github.io/