React开发之——setState方法说明(18)

发表于 分类于 ， ， 阅读时长 ≈ 1 分钟

一 概述

  • setState()是异步更新数据的
  • setState推荐语法
  • setState()第二个参数

二 setState()是异步更新数据的

2.1 使用说明

  • setState() 是异步更新数据的
  • 注意：使用该语法时，后面的 setState() 不要依赖于前面的 setState()
  • 可以多次调用 setState() ，只会触发一次重新渲染

2.2 示例

setState代码

1
2
3
4
5
6
7
8
9
10
handleClick = () => {
    this.setState({
      count: this.state.count + 1
    })
    console.log('count：', this.state.count) // 1
    this.setState({
      count: this.state.count + 1 // 1 + 1
    })
    console.log('count：', this.state.count) // 1
 }

打印结果

1
2
count:1
count:1

三 setState推荐语法

3.1 使用说明

  • 推荐：使用 setState((state, props) => {}) 语法
  • 参数state：表示最新的state
  • 参数props：表示最新的props

3.2 示例代码

setState((state,props)=>{})代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
handleClick = () => {
    this.setState((state, props) => {
      return {
        count: state.count + 1 // 1 + 1
      }
    })
    this.setState((state, props) => {
      console.log('第二次调用：', state)
      return {
        count: state.count + 1
      }
    })
    console.log('count：', this.state.count) // 1
 }

显示结果

1
计算器：3

四 setState()第二个参数

4.1 使用说明

  • 场景：在状态更新（页面完成重新渲染）后立即执行某个操作
  • 语法： setState(updater[, callback])

4.2 示例代码

第二个参数代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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
 }

打印结果

1
2
状态更新完成： 2
计数器：2