React組件規范

框架

瀏覽數:121

2017-9-4

1 有狀態組件只有render方法才能返回JSX，因為JSX中的虛擬DOM有一個_owner屬性，這與它與組件實例進行綁定。如果其他方法里使用了JSX，_owner就沒有與組件實例進行綁定。

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幫你創建它們。

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

9 盡量不要在生命周期鉤子外的方法中使用setState（包括setTimeout方法），因為react的高性能決竅就在于合并多個setState，從而減少對頁面的反復渲染。React在生命周期鉤子與事件回調里都對setState進行劫持，讓它們進入列隊，從而進行合并state

總結

以上是生活随笔為你收集整理的React组件规范的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。