React組件規(guī)范

框架

瀏覽數(shù):121

2017-9-4

1 有狀態(tài)組件只有render方法才能返回JSX，因?yàn)镴SX中的虛擬DOM有一個(gè)_owner屬性，這與它與組件實(shí)例進(jìn)行綁定。如果其他方法里使用了JSX，_owner就沒(méi)有與組件實(shí)例進(jìn)行綁定。

2 render方法里面應(yīng)該以<開(kāi)頭，不應(yīng)該存在if else分支，視情況返回不同的JSX。相同的組件應(yīng)該返回相同的頂級(jí)元素容器。

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

3 ref應(yīng)該盡快淘汰字符串形式，因?yàn)樽址问降膔ef會(huì)自始至終將字符串放在refs對(duì)象中，會(huì)有泄露的問(wèn)題。

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

上面的方法之所以是ok，而不是good，是因?yàn)槲覀冊(cè)诓榭唇M件時(shí)，人家也很難察覺(jué)到你在JSX里偷偷為組件添加了一個(gè)新屬性。組件所有用到的屬性，應(yīng)該都能在constructor或defaultProps中找到。

4 refs.xxx中的DOM節(jié)點(diǎn)，不應(yīng)該再轉(zhuǎn)存到組件實(shí)例上或其他地方中。每次訪問(wèn)refs.xxx必須判定其是否為空。

5 不要在componentWillUpdate/componentDidUpdate/render中執(zhí)行setState, 可能異致死循環(huán)。

6 不要在JSX中使用bind方法綁定組件實(shí)例

// 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幫你創(chuàng)建它們。

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

9 盡量不要在生命周期鉤子外的方法中使用setState（包括setTimeout方法），因?yàn)閞eact的高性能決竅就在于合并多個(gè)setState，從而減少對(duì)頁(yè)面的反復(fù)渲染。React在生命周期鉤子與事件回調(diào)里都對(duì)setState進(jìn)行劫持，讓它們進(jìn)入列隊(duì)，從而進(jìn)行合并state

總結(jié)

以上是生活随笔為你收集整理的React组件规范的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。