react的setState是异步还是同步

简介: react的setState是异步还是同步

文章目录


1. state 的更新可能是异步的

  1. 在合成事件和生命周期中是异步的,这里的异步指的是批量更新,达到性能优化的目的
  2. setTimeout,以及setState中是同步的

1. 1 异步

import {
  Component
} from 'react';
import './App.css';
class App extends Component {
  state = {
    count : 0
  }
  componentDidMount(){
    this.changeValue(1)
  }
  // setState 在合成事件和生命周期中是异步的, 这里的异步也叫批量更新,达到性能优化
  changeValue = (v)=>{
    this.setState({
      count: this.state.count + v
    })
    console.log("state=",this.state.count)
  }
  setCount = ()=>{
    this.changeValue(1)
  }
  render(){
    return (
    <div className="App">
      <h3>显示setState</h3>
      <button onClick={ this.setCount}> {this.state.count} </button>
    </div>
  );
  }
}
export default App;

  • 我们可以看到组件进来就显示1,但是打印区却打印了0, 说明在生命周期componentDidMount中是异步的,
  • 然后点击事件触发的加,显示的组件也每次比打印区的大,说明合成事件中setState也是异步的。

1.1 同步

import {
  Component
} from 'react';
import './App.css';
class App extends Component {
  state = {
    count : 0
  }
  componentDidMount(){
    this.changeValue(1)
    document.getElementById('test').addEventListener('click',()=>{
      this.setCount1(1)
    })
  }
  // setState 在合成事件和生命周期中是异步的, 这里的异步也叫批量更新,达到性能优化
  changeValue = (v)=>{
    this.setState({
      count: this.state.count + v
    })
    console.log("state=",this.state.count)
  }
  // 异步
  // setCount = ()=>{
  //   this.changeValue(1)
  // }
  // 同步
  setCount = ()=>{
    setTimeout(()=>{
      this.changeValue(1)
    },0)
  }
  // 原生事件调用
  setCount1 = ()=>{
    this.changeValue(1)
  }
  render(){
    return (
    <div className="App">
      <h3>显示setState</h3>
      <button onClick={ this.setCount}> {this.state.count} </button>
      <button id='test'>原生事件</button>
    </div>
  );
  }
}
export default App;

  • 可以看到,我们通过定时器或者原生js绑定事件监听的更新都是同步的

2. state的设置会被合并

import {
  Component
} from 'react';
import './App.css';
class App extends Component {
  state = {
    count : 0
  }
  componentDidMount(){
    this.changeValue(1)
  }
  // setState 在合成事件和生命周期中是异步的, 这里的异步也叫批量更新,达到性能优化
  changeValue = (v)=>{
    this.setState({
      count: this.state.count + v
    })
    console.log("state=",this.state.count)
  }
  setCount = ()=>{
    this.changeValue(1)
    this.changeValue(2)
  }
  render(){
    return (
    <div className="App">
      <h3>显示setState</h3>
      <button onClick={ this.setCount}> {this.state.count} </button>
    </div>
  );
  }
}
export default App;

  • 可以看到在异步的更新中,每次都是只加1, 但是我们的愿意是想要他加1之后加2的,那么如何实现我们的需求呢
  1. 可以使用setState的函数方法
  2. 使用定时器把异步转同步

2.1 使用setState的函数方法

import {
  Component
} from 'react';
import './App.css';
class App extends Component {
  state = {
    count : 0
  }
  componentDidMount(){
    this.changeValue(1)
  }
  // setState 在合成事件和生命周期中是异步的, 这里的异步也叫批量更新,达到性能优化
  changeValue = (v)=>{
    this.setState(state=>{
      return {
        count : state.count + v
      }
    })
    console.log("state=",this.state.count)
  }
  setCount = ()=>{
    this.changeValue(1)
    this.changeValue(2)
  }
  render(){
    return (
    <div className="App">
      <h3>显示setState</h3>
      <button onClick={ this.setCount}> {this.state.count} </button>
    </div>
  );
  }
}
export default App;

2.2 转同步

import {
  Component
} from 'react';
import './App.css';
class App extends Component {
  state = {
    count : 0
  }
  componentDidMount(){
    this.changeValue(1)
  }
  changeValue = (v)=>{
    this.setState({
      count: this.state.count + v
    })
    console.log("state=",this.state.count)
  }
  // 同步
  setCount = ()=>{
    setTimeout(()=>{
      this.changeValue(1)
      this.changeValue(2)
    },0)
  }
  render(){
    return (
    <div className="App">
      <h3>显示setState</h3>
      <button onClick={ this.setCount}> {this.state.count} </button>
    </div>
  );
  }
}
export default App;


react的状态更新可能是异步的,也可能是同步

相关文章
|
16天前
|
前端开发
前端React篇之React setState 调用的原理、React setState 调用之后发生了什么?是同步还是异步?
前端React篇之React setState 调用的原理、React setState 调用之后发生了什么?是同步还是异步?
|
1月前
|
前端开发
说说React中setState和replaceState的区别?
在 React 中,setState()和 replaceState()是用于更新组件状态的两个方法。它们之间有一些区别
24 0
|
1月前
|
前端开发 算法
React中的setState执行机制?
React中的setState执行机制?
|
1月前
|
前端开发
React中setState方法详细讲解
React中setState方法详细讲解
|
1月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
190 0
|
1月前
|
存储 前端开发 JavaScript
【第34期】一文学会React组件传值
【第34期】一文学会React组件传值
40 0
|
1月前
|
前端开发
【第31期】一文学会用React Hooks组件编写组件
【第31期】一文学会用React Hooks组件编写组件
41 0
|
1月前
|
存储 前端开发 JavaScript
【第29期】一文学会用React类组件编写组件
【第29期】一文学会用React类组件编写组件
43 0
|
1月前
|
前端开发 开发者
【第26期】一文读懂React组件编写方式
【第26期】一文读懂React组件编写方式
37 0
|
1月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
67 0