使用React.setState须要注意的三点

原文: https://medium.com/@mweststra...
做者: Michel Weststrate

---

前言

这篇文章原标题是3 Reasons why I stopped using React.setState，可是我对原文做者提出的论点不是很感冒，可是做者提出的三点对React新手来讲是很容易忽略的地方，因此我在这里只提出部份内容，并且把标题改成使用React.setState须要注意的三点。

正文

对React新手来讲，使用setState是一件很复杂的事情。即便是熟练的React开发，也颇有可能由于React的一些机制而产生一些bug，好比下面这个例子：

文档中也说明了当使用setState的时候，须要注意什么问题：

注意：
绝对不要 直接改变this.state，由于以后调用setState()可能会替换掉你作的改变。把this.state当作是不可变的。

setState()不会马上改变this.state，而是建立一个即将处理的state转变。在调用该方法以后访问this.state可能会返回现有的值。

对setState的调用没有任何同步性的保证，而且调用可能会为了性能收益批量执行。

setState()将老是触发一次重绘，除非在shouldComponentUpdate()中实现了条件渲染逻辑。若是可变对象被使用了，但又不能在shouldComponentUpdate()中实现这种逻辑，仅在新state和以前的state存在差别的时候调用setState()能够避免没必要要的从新渲染。

总结出来，当使用setState的时候，有三个问题须要注意:

1. setState是异步的(译者注：不保证同步的)

不少开发刚开始没有注意到setState是异步的。若是你修改一些state，而后直接查看它，你会看到以前的state。这是setState中最容易出错的地方。 setState这个词看起来并不像是异步的，因此若是你不假思索的用它，可能会形成bugs。下面这个例子很好的展现了这个问题：

class Select extends React.Component {
  constructor(props, context) {
    super(props, context)
    this.state = {
      selection: props.values[0]
    };
  }
  
  render() {
    return (
      <ul onKeyDown={this.onKeyDown} tabIndex={0}>
        {this.props.values.map(value =>
          <li
            className={value === this.state.selection ? 'selected' : ''}
            key={value}
            onClick={() => this.onSelect(value)}
          >
            {value}
          </li> 
        )}  
      </ul>
    )
  }
  
  onSelect(value) {
    this.setState({
      selection: value
    })
    this.fireOnSelect()
  }

  onKeyDown = (e) => {
    const {values} = this.props
    const idx = values.indexOf(this.state.selection)
    if (e.keyCode === 38 && idx > 0) { /* up */
      this.setState({
        selection: values[idx - 1]
      })
    } else if (e.keyCode === 40 && idx < values.length -1) { /* down */
      this.setState({
        selection: values[idx + 1]
      })  
    }
    this.fireOnSelect()
  }
   
  fireOnSelect() {
    if (typeof this.props.onSelect === "function")
      this.props.onSelect(this.state.selection) /* not what you expected..*/
  }
}

ReactDOM.render(
  <Select 
    values={["State.", "Should.", "Be.", "Synchronous."]} 
    onSelect={value => console.log(value)}
  />,
  document.getElementById("app")
)

第一眼看上去，这个代码彷佛没有什么问题。两个事件处理中调用onSelect方法。可是，这个Select组件中有一个bug很好的展示了以前的GIF图。onSelect方法永远传递的是以前的state.selection值，由于当fireOnSelect调用的时候，setState尚未完成它的工做。我认为React至少要把setState更名为scheduleState或者把回掉函数设为必须参数。

这个bug很容易修改，最难的地方在于你要知道有这个问题。

2. setState会形成没必要要的渲染

setState形成的第二个问题是：每次调用都会形成从新渲染。不少时候，这些从新渲染是没必要要的。你能够用React performance tools中的printWasted来查看何时会发生没必要要渲染。可是，大概的说，没必要要的渲染有如下几个缘由：

• 新的state其实和以前的是同样的。这个问题一般能够经过shouldComponentUpdate来解决。也能够用pure render或者其余的库来解决这个问题。

• 一般发生改变的state是和渲染有关的，可是也有例外。好比，有些数据是根据某些状态来显示的。

• 第三，有些state和渲染一点关系都没有。有一些state多是和事件、timer ID有关的。

3.setState并不能颇有效的管理全部的组件状态

基于上面的最后一条，并非全部的组件状态都应该用setState来进行保存和更新的。复杂的组件可能会有各类各样的状态须要管理。用setState来管理这些状态不但会形成不少不须要的从新渲染，也会形成相关的生命周期钩子一直被调用，从而形成不少奇怪的问题。

后话

在原文中做者推荐了一个叫作MobX的库来管理部分状态，我不是很感冒，因此我就不介绍。若是感兴趣的，能够经过最上面的连接看看原文中的介绍。

基于上面提出的三点，我认为新手应该注意的地方是：

setState是不保证同步的

setState是不保证同步的，是不保证同步的，是不保证同步的。重要的事情说三遍。之因此不说它是异步的，是由于setState在某些状况下也是同步更新的。能够参考这篇文章

若是须要在setState后直接获取修改后的值，那么有几个方案：

传入对应的参数，不经过this.state获取

针对于以前的例子，彻底能够在调用fireOnSelect的时候，传入须要的值。而不是在方法中在经过this.state来获取

使用回调函数

setState方法接收一个function做为回调函数。这个回掉函数会在setState完成之后直接调用，这样就能够获取最新的state。对于以前的例子，就能够这样：

this.setState({
  selection: value
}, this.fireOnSelect)

使用setTimeout

在setState使用setTimeout来让setState先完成之后再执行里面内容。这样子：

this.setState({
  selection: value
});

setTimeout(this.fireOnSelect, 0);

直接输出，回调函数，setTimeout对比

componentDidMount(){
    this.setState({val: this.state.val + 1}, ()=>{
      console.log("In callback " + this.state.val);
    });

    console.log("Direct call " + this.state.val);   

    setTimeout(()=>{
      console.log("begin of setTimeout" + this.state.val);

       this.setState({val: this.state.val + 1}, ()=>{
          console.log("setTimeout setState callback " + this.state.val);
       });

      setTimeout(()=>{
        console.log("setTimeout of settimeout " + this.state.val);
      }, 0);

      console.log("end of setTimeout " + this.state.val);
    }, 0);
  }

若是val默认为0, 输入的结果是：

> Direct call 0
> In callback 1
> begin of setTimeout 1
> setTimeout setState callback 2
> end of setTimeout 2
> setTimeout of settimeout 2

和渲染无关的状态尽可能不要放在state中来管理

一般state中只来管理和渲染有关的状态，从而保证setState改变的状态都是和渲染有关的状态。这样子就能够避免没必要要的重复渲染。其余和渲染无关的状态，能够直接以属性的形式保存在组件中，在须要的时候调用和改变，不会形成渲染。或者参考原文中的MobX。

避免没必要要的修改，当state的值没有发生改变的时候，尽可能不要使用setState。虽然shouldComponentUpdate和PureComponent能够避免没必要要的重复渲染，可是仍是增长了一层shallowEqual的调用，形成多余的浪费。

以上