React組件規範

1 有狀態組件只有render方法才能返回JSX，由於JSX中的虛擬DOM有一個_owner屬性，這與它與組件實例進行綁定。若是其餘方法裏使用了JSX，_owner就沒有與組件實例進行綁定。像vue,只有一個地方（template或render）是與視圖渲染相關的，一目瞭然。

2 render方法裏面應該以<開頭，不該該存在if else分支，視狀況返回不一樣的JSX。相同的組件應該返回相同的頂級元素容器。

// bad
render(){
   if(this.state.a){
      return <strong>222</strong>
   }else{
      return <div>222</div>
   }
}

3 ref應該儘快淘汰字符串形式，由於字符串形式的ref會自始至終將字符串放在refs對象中，會有泄露的問題。

// bad
<Foo
  ref="myRef"
/>

// ok
<Foo
  ref={(ref) => { this.myRef = ref; }}
/>

上面的方法之因此是ok，而不是good，是由於咱們在查看組件時，人家也很難察覺到你在JSX裏偷偷爲組件添加了一個新屬性。組件全部用到的屬性，應該都能在constructor或defaultProps中找到。

4 refs.xxx中的DOM節點，不該該再轉存到組件實例上或其餘地方中。每次訪問refs.xxx必須斷定其是否爲空。

5 不要在componentWillUpdate/componentDidUpdate/render中執行setState, 可能異致死循環。

6 不要在JSX中使用bind方法綁定組件實例（性能相關）

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

7 不要使用cloneElement，createElement,讓JSX與babel幫你建立它們。cloneElement可能會致使_owner丟失。_owner丟失就致使ref失效。

8 不要使用createClass, mixin， PropTypes（它們已經被移出核心庫，被逐漸邊緣化，有關屬性的描述改爲文檔註釋吧）

9 儘可能不要在生命週期鉤子外的方法中使用setState（包括setTimeout方法），由於react的高性能決竅就在於合併多個setState，從而減小對頁面的反覆渲染。React在生命週期鉤子與事件回調裏都對setState進行劫持，讓它們進入列隊，從而進行合併state

10 不要unstable_renderSubtreeIntoContainer,會致使沒法升級到react 16