关于this.setState()的那些事

96
云淡风轻的成长
1.2 2018.04.19 10:12* 字数 1565

在网上看了很多关于this.setState()的介绍,觉得受益匪浅,就总结了一些帮助自己理解的点,在此分享出来,如果有侵权的地方,请及时提醒。

一、State的定义

状态(state) 和 属性(props) 类似,都是一个组件所需要的一些数据集合,但是它是私有的,并且由组件本身完全控制,可以认为它是组件的“私有属性(或者是局部属性)”。

二、关于 setState() 有三件事是你应该知道的。# 参考链接

1.不要直接修改 state(状态)

this.state.comment = 'Hello';

上述代码并不会重新渲染组件,需要使用this.setState()代替:

this.setState({
  comment: 'Hello'
});

需要注意的是唯一可以分配 this.state 的地方是构造函数

2.state(状态) 更新可能是异步的

React 为了优化性能,有可能会将多个 setState() 调用合并为一次更新。
因为this.propsthis.state 可能是异步更新的,你不能依赖他们的值计算下一个state(状态)。以下面的代码为例:

this.setState({
  counter: this.state.counter + this.props.increment,
});

我们并不能通过上述代码得到想要的值,为了弥补这个问题,使用另一种 setState() 的形式,接受一个函数。这个函数将接收前一个状态作为第一个参数,应用更新时的 props 作为第二个参数,代码如下:

this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

3.state(状态)更新会被合并

当你调用 setState(), React 将合并你提供的对象到当前的状态中。所以当State是一个多键值的结构时,可以单独更新其中的一个,此时会进行“差分”更新,不会影响其他的属性值。

三、setState()的异步更新。# 原文链接

1.执行setState()之后干了什么?

setState()方法通过一个队列机制实现state更新,当执行setState()的时候,会将需要更新的state合并之后放入状态队列,而不会立即更新this.state(可以和浏览器的事件队列类比)。如果我们不使用setState而是使用this.state.key来修改,将不会触发组件的re-render。如果将this.state赋值给一个新的对象引用,那么其他不在对象上的state将不会被放入状态队列中,当下次调用setState()并对状态队列进行合并时,直接造成了state丢失。

2.setState()可以接受一个函数作为参数?

setState() 不仅能够接受一个对象作为参数,还能够接受一个函数作为参数。函数的参数即为 state 的前一个状态以及 props
React文档中对setState的说明如下:

void setState (
      function|object nextState,
      [function callback]
)

上述代码的第二个参数是一个回调函数,在setState() 的异步操作结束并且组件已经重新渲染的时候执行。换句话说,我们可以通过这个回调来拿到更新的state的值。

3.执行setState()后能拿到最新的state值吗?

以前在写代码时候,总是遇到明明执行过setState(),但是state的值却不是最新的,那么如何解决这个问题呢?

因为setState()函数接受两个参数,一个是一个对象,就是设置的状态,还有一个是一个回调函数,是在设置状态成功之后执行的,所以我们可以通过回掉拿到最新的state值。代码如下:

updateData = (newData) => {
    this.setState(
        { data: newData },
        () => {
            //这里打印的是最新的state值
            console.log(this.state.data);
        }
    );
}

4.setState()一定是异步更新吗? **# 原文链接

我们先来看看下面的代码:

function incrementMultiple() {
      this.setState({count: this.state.count + 1});
      this.setState({count: this.state.count + 1});
      this.setState({count: this.state.count + 1});
}

直观上来看,当上面的 incrementMultiple 函数被调用时,组件状态的 count 值被增加了3次,每次增加1,那最后 count 被增加了3。但是,实际上的结果只给 state 增加了1。
事实上,setState 方法与包含在其中的执行是一个很复杂的过程,从 React 最初的版本到现在,也有无数次的修改。它的工作除了要更动 this.state 之外,还要负责触发重新渲染,这里面要经过 React 核心 diff 算法,最终才能决定是否要进行重渲染,以及如何渲染。而且为了批次与效能的理由,多个 setState 呼叫有可能在执行过程中还需要被合并,所以它被设计以延时的来进行执行是相当合理的。

setState执行过程

在 React 的 setState 函数实现中,会根据一个变量 isBatchingUpdates 判断是直接更新 this.state 还是放到队列中回头再说,而 isBatchingUpdates 默认是 false,也就表示 setState 会同步更新 this.state,但是,有一个函数 batchedUpdates,这个函数会把 isBatchingUpdates 修改为 true,而当 React 在调用事件处理函数之前就会调用这个 batchedUpdates,造成的后果,就是由 React 控制的事件处理过程 setState 不会同步更新 this.state。

作者给出了下面的重点,赶紧拿起我的小本本记下。

由 React 控制的事件处理过程 setState 不会同步更新 this.state!
也就是说,在 React 控制之外的情况, setState 会同步更新 this.state!

在大部分的使用情况下,我们都是使用了 React 库中的表单组件,例如 select、input、button 等等,它们都是 React 库中人造的组件与事件,是处于 React 库的控制之下,比如组件原色 onClick 都是经过 React 包装。在这个情况下,setState 就会以异步的方式执行。

总结就到这里了,由于我是技术渣渣,能看懂和理解的只有这么多了,如果有读者还想了解更多的内容,可以点击我文中的原文链接去看原作者的文章,如果遇到侵权的地方,请联系我,必删。

React
Gupao