react setState说明

setState() 是异步更新数据的
 注意：使用该语法时，后面的 setState() 不要依赖于前面的 setState()
 可以多次调用 setState() ，只会触发一次重新渲染
this.state = { count: 1 }
this.setState({
count: this.state.count + 1
})
console.log(this.state.count) // 1

推荐：使用 setState((state, props) => {}) 语法
 参数state：表示最新的state
 参数props：表示最新的props
this.setState((state, props) => {
return {
count: state.count + 1
}
})
console.log(this.state.count) // 1

例子:
class App extends React.Component {
state = {
count: 1
}

    handleClick = () => {
      // 推荐语法：
      // 注意：这种语法也是异步更新state的！
      this.setState((state, props) => {
        return {
          count: state.count + 1 // 1 + 1
        }
      })
      this.setState((state, props) => {
        console.log('第二次调用：', state)  //打印是第一次调用后的结果2  输出3
        return {
          count: state.count + 1
        }
      })
      console.log('count：', this.state.count) // 1  //异步变量提升所以是1
    }
  
    render() {
      return (
        <div>
          <h1>计数器：{this.state.count}</h1>
          <button onClick={this.handleClick}>+1</button>
        </div>
      )
    }
  }
ReactDOM.render(<App />, document.getElementById('root'))

场景：在状态更新（页面完成重新渲染）后立即执行某个操作
 语法： setState(updater[, callback])
this.setState(
(state, props) => {},
() => {console.log('这个回调函数会在状态更新后立即执行')}
)

例子:
class App extends React.Component {
state = {
count: 1
}
handleClick = () => {
this.setState(
(state, props) => {
return {
count: state.count + 1
}
},
// 状态更新后并且重新渲染后，立即执行：
() => {
console.log('状态更新完成：', this.state.count) // 2
console.log(document.getElementById('title').innerText)
document.title = '更新后的count为：' + this.state.count
}
)
console.log(this.state.count) // 1
}

    render() {
      return (
        <div>
          <h1 id="title">计数器：{this.state.count}</h1>
          <button onClick={this.handleClick}>+1</button>
        </div>
      )
    }
  }
ReactDOM.render(<App />, document.getElementById('root'))