怎么理解React中的State 的更新可能是异步的？

官方文档描述

出于性能考虑，React 可能会把多个 setState() 调用合并成一个调用。

因为 this.props 和 this.state 可能会异步更新，所以你不要依赖他们的值来更新下一个状态。

官方链接地址：https://react.docschina.org/docs/state-and-lifecycle.html

通过下面的例子来进行理解

1.在src下新建一个js文件

import React from 'react';

class Clock extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      value: 0,
    }
  }


  add() {
    this.setState({
      value: this.state.value + this.props.numberValue
    })
  }

  handleClick() {
    this.add()
    this.add()
    this.add()
  }

  render() {
    return (
      <div>
        <h1>{this.state.value}</h1>
        <button onClick={() => this.handleClick()}>点击+3</button>
      </div>
    )
  }
}

export default Clock;

// 在其他地方使用组件并传入propsValue
// <Clock propsValue={1}/>  这里传入的是1

2.运行效果

 

3.点击后的效果

 

我们调用了三次add方法却只增加了1， 这就是官方说的：出于性能考虑，React 可能会把多个 setState() 调用合并成一个调用，此时就是将add合并成一个进行调用

解决方法：

1.将add中的setState()接受的值改为函数而不是对象

  add() {
    this.setState((state, props) => ({
      value: state.value + props.numberValue
    }))
  }

使用普通函数也可以

this.setState(function(state, props) {
      return {
        value: state.value + props.numberValue
      }
})

看下更改之后的效果