react学习18-React 使用setState()更新类组件的state

setState分析

• 修改数据是异步的

// setState更新数据是异步的
this.setState({
  num: this.state.num + 1
}, () => {
  // 该函数如果触发，那么就说明状态已经修改完成
  console.log(this.state.num)
})

• 不要频繁调用setState

// 多次频繁调用setState，内部会进行合并，只更新最后一次
// 不要频繁调用setState方法
this.setState({
  num: this.state.num + 1
})
this.setState({
  num: this.state.num + 1
})
this.setState({
  num: this.state.num + 1
})

// setTimeout(() => {
//   console.log(this.state.num)
// }, 3000)

• setState参数可以是一个函数

// setState另外一种调用形式
// 如下的写法支持多次调用
this.setState((state) => {
  // state表示上次完成更新后的结果
  return {
    num: state.num + 1
  }
})
this.setState((state) => {
  // state表示上次完成更新后的结果
  console.log(state.num)
  return {
    num: state.num + 1
  }
}, () => {
  console.log(this.state.num)
})