当前位置：首页 > news >正文

14. setState是异步更新

news 2025/11/2 16:05:47

setState是异步更新

1.3.1. setState的更多用法

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

用法一：基本使用

关键代码如下：

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

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

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

3.2. 关键代码如下：

  // 好处一： 可以在回调函数中编写新的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. 示例代码如下：
```
  this.setState({ message: '你好啊,李银河' }, () => {console.log('+++++++++++++', this.state.message)})console.log('----------', this.state.message)
```
- 1. 代码运行图如下：

完整代码如下：

  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中传入第二个传输：callbackthis.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.statereturn (<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