React组件规范

React最佳实践指南

最新推荐文章于 2024-10-02 10:02:41 发布

weixin_34254823

最新推荐文章于 2024-10-02 10:02:41 发布

阅读量167

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000010832044

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