12 【react高级指引（上）】

12 【react高级指引（上）】

1.setState 扩展

1.1 对象式 setState

首先在我们以前的认知中，setState 是用来更新状态的，我们一般给它传递一个对象，就像这样

this.setState({
   
    count: count + 1
})
1
2
3
4

这样每次更新都会让 count 的值加 1。这也是我们最常做的东西

这里我们做一个案例，点我加 1，一个按钮一个值，我要在控制台输出每次的 count 的值

那我们需要在控制台输出，要如何实现呢？

我们会考虑在 setState 更新之后 log 一下

add = () => {
   
    const {
    count } = this.state
    this.setState({
   
        count: count + 1
    })
    console.log(this.state.count);
}
1
2
3
4
5
6
7
8
9
10

因此可能会写出这样的代码，看起来很合理，在调用完 setState 之后，输出 count

我们发现显示的 count 和我们控制台输出的 count 值是不一样的

这是因为，我们调用的 setState 是同步事件，但是它的作用是让 React 去更新数据，而 React 不会立即的去更新数据，这是一个异步的任务，因此我们输出的 count 值会是状态更新之前的数据。“React 状态更新是异步的”

那我们要如何实现同步呢？

其实在 setState 调用的第二个参数，我们可以接收一个函数，这个函数会在状态更新完毕并且界面更新之后调用，我们可以试试

setState(stateChange, [callback])------对象式的setState
1.stateChange为状态改变对象(该对象可以体现出状态的更改)
2.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用

add = () => {
   
    const {
    count } = this.state
    this.setState(
      {
   
        count: count + 1,
      },
      () => {
   
        document.title = `当前值是${
     this.state.count}`
      },
    )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

我们将 setState 填上第二个参数，输出更新后的 count 值

这样我们就能成功的获取到最新的数据了，如果有这个需求我们可以在第二个参数输出噢~

1.2 函数式 setState

，函数式的 setState 也是接收两个参数

第一个参数是 updater ，它是一个能够返回 stateChange 对象的函数

第二个参数是一个回调函数，用于在状态更新完毕，界面也更新之后调用

与对象式 setState 不同的是，我们传递的第一个参数 updater 可以接收到2个参数 state 和 props

我们尝试一下

setState(updater, [callback])------函数式的setState
1.updater为返回stateChange对象的函数。
2.updater可以接收到state和props。
4.callback是可选的回调函数, 它在状态更新、界面也更新后(render调用后)才被调用。

add = () => {
   
    this.setState(
      (state, props) => ({
    count: state.count + 1 }),
      () => {
   
        document.title = `当前值是${
     this.state.count}`
      },
    )
}
1
2
3
4
5
6
7
8
9
10
11
12

我们也成功的实现了

我们在第一个参数中传入了一个函数，这个函数可以接收到 state ，我们通过更新 state 中的 count 值，来驱动页面的更新

利用函数式 setState 的优势还是很不错的，可以直接获得 state 和 props

可以理解为对象式的 setState 是函数式 setState 的语法糖

1.3 总结

(1). setState(stateChange, [callback]