14. setState是异步更新

setState是异步更新

1.3.1. setState的更多用法
*

setState处理数据的原理

1.1. 原理：把原来的state和新的state做了一个合并，如果出现属性一样的情况下，用新属性把原来的属性给覆盖掉，内部做了一个这样的事情，做完合并值之后再在合适的时机调用render函数
1.2. 为什么是合适时机调用render函数呢？
- render函数不是立马调用的，因为它还涉及到一些性能优化的东西，然后在去调用render函数
1.3. 数据合并的示例图如下：

用法一：基本使用

关键代码如下：

js 复制代码

  this.setState({
    message: '你好啊 李银河'
  })

用法二：setState可以传入一个回调函数

3.1. 传入回调函数的代码运行原理：
- 原理：给setState传入了一个回调函数，内部会主动回调这个函数，并且拿到结果进行一个值合并，在回调函数的过程中，会把原来的state和props传递过来
3.2. 传入回调函数的好处：
- 好处一：可以在回调函数中编写新的state的逻辑(写在外面也可以，写在函数里面内聚性更强)
- 好处二：当前回调函数会将之前的state和props传递进来

3.2. 关键代码如下：

js 复制代码

  // 好处一： 可以在回调函数中编写新的state的逻辑(写在外面也可以，写在函数里面内聚性更强)
  // 好处二： 当前回调函数会将之前的state和props传递进来
  this.setState((state, props) => { // 原来的state，props可以拿到
    // 1. 编写一些对新的state处理逻辑
    // 2. 可以获取之前的state和props
    // 原理：给setState传入了一个回调函数，内部会主动回调这个函数，并且拿到结果进行一个值合并，在回调函数的过程中，会把原来的state和props传递过来
    console.log('state===', state, props) 
    console.log(this.state.message, this.props)
    return {
      message: '你好啊,李银河'
    }
  })

1. 用法三：setState在React的事件处理中是一个异步调用
- 1. 异步调用：它不会阻塞接下来的代码执行，这个操作并不会立马完成的，可能需要经过一定的时间后真正的完成你对应的操作
- 1. 如果希望在数据更新之后(数据合并)，获取到对应的结果执行一些逻辑代码, 那么可以在setState中传入第二个传输：callback
- 1. 示例代码如下：
  js 复制代码
```
  this.setState({ message: '你好啊,李银河' }, () => {
    console.log('+++++++++++++', this.state.message)
  })
  console.log('----------', this.state.message)
```
- 1. 代码运行图如下：

完整代码如下：

js 复制代码

  import React, { Component } from 'react'

  export class App extends Component {
    constructor() {
      super()
      this.state ={
        message: 'hello world',
        counter: 1
      }
    }
    changeText () {
      // 1. setState更多用法
      // 1. 基本使用 setState的原理：(Object.assign(this.state, newState)合并后 -> render()) 
      // setState的原理：把原来的state和新的state做了一个合并，如果出现属性一样的情况下，用新属性把原来的属性给覆盖掉，内部做了一个这样的事情，做完合并值之后再在合适的时机调用render函数
      // render函数不是立马调用的，因为它还涉及到一些性能优化的东西，然后在去调用render函数
      // this.setState({
      //   message: '你好啊 李银河'
      // })

      // 2. setState可以传入一个回调函数
      // 好处一： 可以在回调函数中编写新的state的逻辑(写在外面也可以，写在函数里面内聚性更强)
      // 好处二： 当前回调函数会将之前的state和props传递进来
      // this.setState((state, props) => { // 原来的state，props可以拿到
      //   // 1. 编写一些对新的state处理逻辑
      //   // 2. 可以获取之前的state和props
      //   //  给setState传入了一个回调函数，内部会主动回调这个函数，并且拿到结果进行一个值合并，在回调函数的过程中，会把原来的state和props传递过来
      //   console.log('state===', state, props) 
      //   console.log(this.state.message, this.props)
      //   return {
      //     message: '你好啊,李银河'
      //   }
      // })

      // 3. setState在React的事件处理中是一个异步调用
      // 异步调用：它不会阻塞接下来的代码执行，这个操作并不会立马完成的， 可能需要经过一定的时间后真正的完成你对应的操作
      // - 如果希望在数据更新之后(数据合并)， 获取到对应的结果执行一些逻辑代码
      // - 那么可以在setState中传入第二个传输：callback
      this.setState({ message: '你好啊,李银河' }, () => {
        console.log('+++++++++++++', this.state.message)
      })
      console.log('----------', this.state.message)

    }
    increment () {
    
      this.setState({
        counter: this.state.counter + 1
      })
    
    }
    render() {
      const { message, counter } = this.state
      return (
        <div>
          <h2>message: {message}</h2>
          <button onClick = {e => this.changeText()}>修改文本</button>
          <h2>当前计数：{ counter }</h2>
          <button onClick= { e => this.increment()}>+1</button>
        </div>
      )
    }
  }

  export default App