React setState是异步还是同步原理解析

目录
  • setState异步更新
    • 那么为什么setState设计为异步呢？
    • 如何获取异步的结果
  • setState一定是异步的吗？

setState异步更新

开发中当组件中的状态发生了变化，页面并不会重新渲染。我们必须要通过setState来告知React数据已经发生了变化，重新渲染页面。

先来看下面的例子：

constructor() {
    super();
    this.state = {
      message: "Hello World",
    };
}
changeText() {
   this.setState({
      message: "Hello React",
   });
   console.log(this.state.message); // Hello World
}

最终打印的结果是Hello World；

可见setState是异步的操作，我们并不能在执行完setState之后立马拿到最新的state的结果

那么为什么setState设计为异步呢？

setState设计为异步，可以显著的提升性能

  • 如果每次调用setState都进行一次更新，那么意味着render函数会被频繁调用，界面重新渲染，这样效率是很低的；
  • 最好的办法是获取多个更新，之后进行批量处理；

如果同步更新了state，但是还没有执行render函数，那么state和props不能保持同步；

state和props不能保持一致性，会在开发中产生很多的问题；（比如，组件嵌套时影响子组件中的状态）

如何获取异步的结果

setState的回调

setState接受两个参数：第二个参数是一个回调函数，这个回调函数会在更新后会执行；

changeText() {
    this.setState({
      message: "Hello React",
    },()=>{
        console.log('-----',this.state.message); // Hello React
    });
  }

也可以在生命周期函数中获取：

   componentDidUpdate(prevProps, prevState, snapshot){
   console.log(this.state.message);// Hello React
   }

setState一定是异步的吗？

React18版本之前

其实可以分成两种情况：

  • 在组件生命周期或React合成事件中，setState是异步的；
  • 在setTimeout或者原生DOM事件中，setState是同步的

验证一：在setTimeout中的更新：

setTimeout(() => {
      this.setState({
        message: "Hello React",
      });
      console.log(this.state.message); // Hello React
 }, 0);

验证二：原生DOM事件：

componentDidMount() {
    const btnEl = document.querySelector("#btn");
    btnEl.addEventListener("click", () => {
      this.setState({
        message: "Hello React",
      });
      console.log(this.state.message); // Hello React
    });
  }

React18版本之后

setState默认是异步的

  • 在React18之后，默认所有的操作都被放到了批处理中(异步处理)

如果希望代码可以同步拿到，则需要执行特殊的flushSync操作：

import { flushSync } from "react-dom";
changeText() {
    flushSync(() => {
      this.setState({
        message: "Hello React",
      });
    });
    console.log(this.state.message); // Hello React
  }

以上就是React setState是异步还是同步原理解析的详细内容，更多关于React setState异步同步的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • React中setState的使用与同步异步的使用

    在react中,修改状态如果直接使用this.state,不会引起组件的重新渲染,需要通过 this.setState来对组件的属性进行修改. 1.this.setState的两种定义方式 定义初始状态 state = { count: 0 }, 如果此时有一个按钮,点击按钮让计数加1,我们可以有两种写法 (1)传递对象 this.setState({ count: this.state.count + 1}) (2)传递函数 this.setState((state, props) => ({

  • React 中的 setState 是同步还是异步

    React 中的 setState 是同步还是异步

    setState 是同步还是异步?肯定是异步的呀. 确定么?那看一下这段代码会打印什么: import { Component } from 'react'; class Dong extends Component { constructor() { super(); this.state = { count: 0 } } componentDidMount() { setTimeout(() => { this.setState({ count: 1 }); console.log(this

  • 关于React中setState同步或异步问题的理解

    目录 1. setState同步?异步? 2. 表现为异步 1. React 合成事件 2. 生命周期函数 3. 表现为同步 1. 原生事件 2. setTimeout 4. setState的第二个参数 1. setState同步?异步? 在 React 的类式组件中,我们可以使用setState方法更新state状态.但有些时候使用setState之后,得不到最新的数据. 其实 React 中setState本身执行的过程和代码是同步的,只是因为 React 框架本身的性能优化机制而导致的.

  • 代码解析React中setState同步和异步问题

    React起源于Facebook的内部项目.React的出现是革命性的创新,React的是一个颠覆式的前端框架.在React官方这样介绍的它:一个声明式.高效.灵活的.创建用户界面的JavaScript库,即使React的主要作用是构建UI,但是项目的逐渐成长已经使得react成为前后端通吃的WebApp解决方案. angular中用的是watcher对象,vue是观察者模式,react就是state了,他们各有各的特点,没有好坏之分,只有需求不同而选择不同. React的官方网址:https:

  • React中setState同步异步场景的使用

    目录 setState同步异步场景 描述 原理 保证内部数据统一 启用并发更新 参考 setState同步异步场景 React通过this.state来访问state,通过this.setState()方法来更新state,当this.setState()方法被调用的时候,React会重新调用render方法来重新渲染UI.相比较于在使用Hooks完成组件下所需要的心智负担,setState就是在使用class完成组件下所需要的心智负担,当然所谓的心智负担也许叫做所必须的基础知识更加合适一些.

  • React setState是异步还是同步原理解析

    React setState是异步还是同步原理解析

    目录 setState异步更新 那么为什么setState设计为异步呢? 如何获取异步的结果 setState一定是异步的吗? setState异步更新 开发中当组件中的状态发生了变化,页面并不会重新渲染.我们必须要通过setState来告知React数据已经发生了变化,重新渲染页面. 先来看下面的例子: constructor() { super(); this.state = { message: "Hello World", }; } changeText() { this.se

  • react diff 算法实现思路及原理解析

    react diff 算法实现思路及原理解析

    目录 事例分析 diff 特点 diff 思路 实现 diff 算法 修改入口文件 实现 React.Fragment 我们需要修改 children 对比 前面几节我们学习了解了 react 的渲染机制和生命周期,本节我们正式进入基本面试必考的核心地带 -- diff 算法,了解如何优化和复用 dom 操作的,还有我们常见的 key 的作用. diff 算法使用在子都是数组的情况下,这点和 vue 是一样的.如果元素是其他类型的话直接替换就好. 事例分析 按照之前的 diff 写法,如果元素不

  • React不使用requestIdleCallback实现调度原理解析

    目录 1.起因 2.查找问题 3.解决问题 4.总结 5.吐槽 1.起因 最近在一边啃源码,一边手写fiber嘛,然后也看了很多博客和资料,基本上大伙好像都是说用requestIdleCallback来模拟react实现一个空闲时间调度.但我自己手写的时候把怎么用怎么怪,老是感觉有什么地方不对劲而且是在调度过程中,可能是因为我是想写出来来一个相对健全一点的模版方便我以后写源码的其他部分把,然后分析了一下所以有了这篇博客. 2.查找问题 1.requestIdleCallback是利用帧之间空闲时

  • vuex Mutations同步Actions异步原理解析

    目录 正文 避坑 mutation actions 总结 正文 vuex的mutations与actions有什么区别,除了用法上mutation是同步,actions是异步,这里的同步与异步指的是commitordispatch?并不是,同步指mutations方的内部是同步的,而actions内部可以是异步的,并且修改数据只能在mutations中修改,在actions中异步的操作副作用是通过mutations来记录.本文是一篇笔者记录vuex关于mutations与actions的笔记.

  • react 实现图片正在加载中 加载完成 加载失败三个阶段的原理解析

    react 实现图片正在加载中 加载完成 加载失败三个阶段的原理解析

    最近博客写道项目列表中,发现这里比较多图片,一开加载会比较慢,然后就想要用一个loading的图片来占位.与此同时,如果图片加载失败那么显示错误的图片,不显示一个原有的错误,那样比较难看. 效果 原理解析 这个就是一个组件,一个图片展示的组件,直接更改img标签的url地址就好,对的,是这样的,在vue中直接更改地址,vue会有响应式的更新数据. 图片的事件 图片是有许多的事件的,例如,onload, onerror等,图片只要一加载就会调用onload的事件,不管是加载成功还是加载失败都会调用

  • React服务端渲染原理解析与实践

    关于服务端渲染也就是我们说的SSR大多数人都听过这个概念,很多同学或许在公司中已经做过服务端渲染的项目了,主流的单页面应用比如说Vue或者React开发的项目采用的一般都是客户端渲染的模式也就是我们说的CSR. 但是这种模式会带来明显的两个问题,第一个就是TTFP时间比较长,TTFP指的就是首屏展示时间,同时不具备SEO排名的条件,搜索引擎上排名不是很好.所以我们可以借助一些工具来进行改良我们的项目,将单页面应用编程服务器端渲染项目,这样就可以解决掉这些问题了. 目前主流的服务器端渲染框架也就是

  • Java同步关键字synchronize底层实现原理解析

    Java同步关键字synchronize底层实现原理解析

    目录 1 字节码层实现 1.1 InterpreterRuntime::monitorenter 1.1.1 函数参数 JavaThread *thread 1.1.2 函数体 2 偏向锁 2.1 偏向锁的意义 2.2 偏向锁的获取 2.2.1 markOop mark = obj->mark() 2.2.2 判断mark是否为可偏向状态 2.2.3 判断mark中JavaThread的状态 2.2.4 通过CAS原子指令 2.2.5 如果执行CAS失败 2.3 偏向锁的撤销 2.4 轻量级锁

  • react  Suspense工作原理解析

    react  Suspense工作原理解析

    目录 Suspense 基本应用 Suspense 原理 基本流程 源码解读 - primary 组件 源码解读 - 异常捕获 源码解读 - 添加 promise 回调 源码解读-Suspense 首次渲染 primary 组件加载完成前的渲染 primary 组件加载完成时的渲染 利用 Suspense 自己实现数据加载 Suspense 基本应用 Suspense 目前在 react 中一般配合 lazy 使用,当有一些组件需要动态加载(例如各种插件)时可以利用 lazy 方法来完成.其中

  • React合成事件原理解析

    目录 事件介绍 什么是事件? 举个栗子 代码实现 React合成事件基础知识 什么是合成事件? 在React中事件的写法和原生事件写法的区别? 为什么会有合成事件? 合成事件机制简述 React合成事件实现原理 事件注册 事件触发-事件监听器做了什么 React中模拟冒泡和捕获 总结 事件介绍 什么是事件? 事件是在编程时系统内发生的动作或者发生的事情,而开发者可以某种方式对事件做出回应,而这里有几个先决条件 事件对象 给事件对象注册事件,当事件被触发后需要做什么 事件触发 举个栗子 在机场等待

随机推荐