为什么有时连续多次setState只有一次生效？

例如下面的代码，两次打印出的结果是相同的：

componentDidMount() {
    this.setState({ index: this.state.index + 1 }, () => {
      console.log(this.state.index);
    })
    this.setState({ index: this.state.index + 1 }, () => {
      console.log(this.state.index);
    }) 
}

原因就是 React 会批处理机制中存储的多个 setState进行合并，来看下 React 源码中的 _assign函数，类似于 Object的 assign：

_assign(nextState,typeof partial ==='function'?partial.call(inst,nextState,props,context):partial);

如果传入的是对象，很明显会被合并成一次，所以上面的代码两次打印的结果是相同的：

Object.assign(
  nextState,
  {index: state.index+ 1},
  {index: state.index+ 1}
)

注意， assign函数中对函数做了特殊处理，处理第一个参数传入的是函数，函数的参数 preState是前一次合并后的结果，所以计算结果是准确的：

componentDidMount() {
    this.setState((state, props) => ({
        index: state.index + 1
    }), () => {
      console.log(this.state.index);
    })
    this.setState((state, props) => ({
        index: state.index + 1
    }), () => {
      console.log(this.state.index);
    })
}

所以上面的代码两次打印的结果是不同的。

最佳实践

React 会对多次连续的 setState进行合并，如果你想立即使用上次 setState 后的结果进行下一次 setState，可以让 setState 接收一个函数而不是一个对象。这个函数用上一个 state 作为第一个参数，将此次更新被应用时的 props 做为第二个参数。

以上关于为什么有时连续多次setState只有一次生效？的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。