React组件规范

发布时间:2019-06-21 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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方法绑定组件实例(性能相关)