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

你可能感兴趣的文章

24 条评论
阿木木 · 2017年08月24日

PropTypes没太懂,怎么代替呢

+3 回复

0

Flow or TypeScript

timwangdev · 2017年08月24日
bestend · 2017年08月24日

'7 不要使用cloneElement,createElement,让JSX与babel帮你创建它们。'
请问怎样才能使用JSX和babel创建呢?

+2 回复

longzhaobi · 2017年08月24日

render里不要使用条件表达式,这个有点非常不明白,。这么好的东西居然不推荐用,判断按钮权限我就是这样做的,有权限返回按钮,没有返回null。

+2 回复

4

简单的可以用,但尽量不要在里面搞这么多分支吧

司徒正美 作者 · 2017年08月24日
2

@司徒正美 不管是简单的复杂的,要实现用户传下来的参数决定渲染对应的组件,不用条件判断,难道还有其他的方法更优雅?

longzhaobi · 2017年08月24日
0

条件表达式太多或许说明组件粒度不够

shockw4ver · 2017年12月26日
yezi12138 · 2017年08月27日

能说说第六点的意义吗,我都是在里面绑定this的

+2 回复

0

在 JSX 中使用 bind 会造成每次渲染视图时都执行一次绑定

shockw4ver · 2017年12月26日
胜哥 · 2017年08月24日

程序交互比较复杂的时候,还是不得不在didUpdate里用到setState, 这时候注意死循环就行了

+1 回复

0

会死循环的

司徒正美 作者 · 2017年08月24日
1

我会在setState里附加一个下次不允许更新的标志,然后在shouldComponentUpdate禁止触发下一次更新

胜哥 · 2017年08月24日
longzhaobi · 2017年08月24日

估计是顶级元素不确定,strong或者div,

+1 回复

喻木同學 · 2017年08月24日

(灬°ω°灬)

回复

blade254353074 · 2017年08月24日

PropTypes 怎么就不要用了

回复

Jogis · 2017年08月24日

第六点里面,render使用bind方法,除了性能问题还有其他

回复

meikidd · 2017年08月24日

同问 PropTypes 的问题,为什么不推荐用

回复

0

因为类型检测应该是工程化要解决的问题,使用 PropTypes 会将类型检查带入最终的生产环境,这是一些不应该有的开销

shockw4ver · 2017年12月26日
0

@shockw4ver 原来如此,谢谢

meikidd · 2017年12月29日
tomshe · 2017年08月24日

求教,render里如果不加判断如何根据不同情况展示不同的内容呢,有什么好的方法没🌹

回复

WangXiPing · 2017年08月24日

谁能解释下第二条 使用ifelse 有什么副作用?

回复

0

@WangXiPing 反正我用ifelse很多年了

micro_hx1 · 2017年08月25日
电波马达 · 2017年08月24日

6- 这样会不会更好 onClickDiv = () => // best;

回复

0

这样也可以,babel会自动优化

司徒正美 作者 · 2017年08月27日
载入中...
司徒正美 司徒正美

3.6k 声望