React18之状态批处理的使用

目录
  • 状态自动批处理
  • 17版
  • 18版
  • 退出状态自动批处理
  • 要点概述

react在3月29号正式发布了18版本, 此次更新包括: 状态自动批处理, 客户端渲染api的更新, 新的hook等很多变化, 本章先说一下状态批处理的变化.

React v18.0 – React Blog

状态自动批处理

18版本之前, 在合成事件之外的原生事件中(例如 setTimeout, onclick, promise) , 更新状态并不会进行批量处理(合并), 这意味着在原生事件中多次调用状态更新会造成多次应用的重新渲染, 往往我们只需要最后一次即可, react在18版本后优化了这个问题

import { useState } from 'react'

function App() {
  const [num1, setNum1] = useState(1)
  const [num2, setNum2] = useState(1)
  const add = () => {
    setTimeout(() => {
      setNum1((pre) => pre + 1)
      setNum2((pre) => pre + 1)
    })
  }
  console.log('渲染了')
  return (
    <div className="App">
      <header className="App-header">react 18</header>
      <p>num1 : {num1}</p>
      <p>num2 : {num2}</p>
      <button onClick={add}>+1</button>
    </div>
  )
}

export default App

17版

点击四下后,组件渲染了8次

18版

点击4下后, 组件渲染了4次

退出状态自动批处理

在某些场景下 我们可能不需要批处理状态更新, 此时我们需要用到 react-dom 提供的flushSync函数, 该函数需传入一个回调, 并且会同步刷新回调中的状态更新

import { useState } from 'react'
import { flushSync } from 'react-dom'

function App() {
  const [num1, setNum1] = useState(1)
  const [num2, setNum2] = useState(1)
  const add = () => {
    setTimeout(() => {
      flushSync(() => {
        setNum1((pre) => pre + 1)
      })
      flushSync(() => {
        setNum2((pre) => pre + 1)
      })
    })
  }
  console.log('渲染了')
  console.log(num1, num2)
  return (
    <div className="App">
      <header className="App-header">react 18</header>
      <p>num1 : {num1}</p>
      <p>num2 : {num2}</p>
      <button onClick={add}>+1</button>
    </div>
  )
}

export default App

要点概述

1. 原生事件内状态更新改为批量处理

2. 不需要批量处理时 使用 react-dom 提供的flushSync函数, 此函数同步刷新参数回调内的状态更新

到此这篇关于React18之状态批处理的使用的文章就介绍到这了,更多相关React18 状态批处理内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 基于React Hooks的小型状态管理详解

    目录 实现基于 React Hooks 的状态共享 使用感受 本文主要介绍一种基于 React Hooks 的状态共享方案,介绍其实现,并总结一下使用感受,目的是在状态管理方面提供多一种选择方式. 实现基于 React Hooks 的状态共享 React 组件间的状态共享,是一个老生常谈的问题,也有很多解决方案,例如 Redux.MobX 等.这些方案很专业,也经历了时间的考验,但私以为他们不太适合一些不算复杂的项目,反而会引入一些额外的复杂度. 实际上很多时候,我不想定义 mutation 和

  • React全局状态管理的三种底层机制探究

    React全局状态管理的三种底层机制探究

    目录 前言 props context state 总结 前言 现代前端框架都是基于组件的方式来开发页面.按照逻辑关系把页面划分为不同的组件,分别开发不同的组件,然后把它们一层层组装起来,把根组件传入 ReactDOM.render 或者 vue 的 $mount 方法中,就会遍历整个组件树渲染成对应的 dom. 组件都支持传递一些参数来定制,也可以在内部保存一些交互状态,并且会在参数和状态变化以后自动的重新渲染对应部分的 dom. 虽然从逻辑上划分成了不同的组件,但它们都是同一个应用的不同部分

  • 关于React状态管理的三个规则总结

    目录 前言 No.1 一个关注点 No.2 提取复杂的状态逻辑 No.3 提取多个状态操作 总结 前言 React 组件内部的状态是在渲染过程之间保持不变的封装数据.useState() 是 React hook,负责管理功能组件内部的状态. 我喜欢 useState() ,它确实使状态处理变得非常容易.但是我经常遇到类似的问题: 我应该将组件的状态划分为小状态,还是保持复合状态? 如果状态管理变得复杂,我应该从组件中提取它吗?该怎么做? 如果 useState() 的用法是如此简单,那么什么时

  • React 使用Hooks简化受控组件的状态绑定

    开始之前 阅读本文需要对以下几项有一定了解 ECMAScript 6 文章中大量用到了 ES6 语法,比如解构赋值和函数参数默认值.剩余参数.展开语法.箭头函数等. Hooks React 在 16.8 版本中推出了 Hooks,它允许你在"函数组件"中使用"类组件"的一些特性. React 本身提供了一些 Hooks,比如 useState.useReducer 等.通过在一个以"use"作为命名起始的函数中调用这些 Hooks,就得到了一个

  • 浅谈React之状态(State)

    浅谈React之状态(State)

    在React当中,当你更新组件的state,然后新的state就会重新渲染到页面中.在这个时候不需要你操作任何DOM.你也可以认为组件在React当中是一个状态机(State Machines).当用户进行操作时会实现不同的状态,然后再渲染到你的页面中,让你的页面与数据始终保持一致. 如何定义State 定义一个合适的State,是正确创建组件的第一步.State必须能代表一个组件UI呈现的完整状态集,即组件的任何UI改变,都可以从State的变化中反映出来:同时,State还必须是代表一个组件

  • 在react中使用vue的状态管理的方法示例

    我是要介绍一个新的 react 全局共享状态管理器,它和 vue 组件的状态管理一起同工之妙. 马上体验 在 react 状态管理领域,react-redux 可谓是只手遮天了,基于 flux 思想实现,小巧,immutable 的思想让数据变化可控.但 immutable 所带来的编程代价太大了,如果你要更新一个深层结构的对象的某个节点,写作将会是极其麻烦的一件事,而且还保不准会出错.为了保证 immutable,redux 的 reducer 机制让开发者掉光了头发.于是有了类似 dva.r

  • React18之状态批处理的使用

    React18之状态批处理的使用

    目录 状态自动批处理 17版 18版 退出状态自动批处理 要点概述 react在3月29号正式发布了18版本, 此次更新包括: 状态自动批处理, 客户端渲染api的更新, 新的hook等很多变化, 本章先说一下状态批处理的变化. React v18.0 – React Blog 状态自动批处理 18版本之前, 在合成事件之外的原生事件中(例如 setTimeout, onclick, promise) , 更新状态并不会进行批量处理(合并), 这意味着在原生事件中多次调用状态更新会造成多次应用的

  • react18中react-redux状态管理的实现

    react的状态管理还是挺多的现在流行的有以下五种: Recoil MobX XState Redux Context 今天我们来讲一下react众多状态管理之一的redux,虽然这个我不太喜欢用,但是我觉得简单的状态管理谁都会,但是难的就是程序员的分水岭,所以今天来给大家讲一下redux. 下面我们来讲讲redux的优点: 可以在众多组件中传值,突破react单向数据流的限制 不仅支持react还支持vue等主流框架 当然是好用方便啦 接下来我们讲一下啥时候去使用他 在我们有好多组件,但是组件

  • 计算机/网络设备状态监测脚本 批处理

    以前自己写的一个监控脚本,每隔10秒使用PING命令检查一个IP列表中的IP,如果不通,则通过messenger消息发送,并使用BEEP发出报警声.需要文件sleep.exe(可到网上下一个).BEEP.EXE(自己用DELPHI写的,不必需,代码可去掉,也可以去网上找一个),再建立文件ip.txt,user.txt,运行脚本即可. 复制代码 代码如下: rem main.bat  @echo off  for /F "eol=; tokens=1,2* delims==" %%i i

  • React18新增特性released的使用

    目录 新功能:Automatic Batching 新功能:Transitions 新的Suspense功能 新的客户端和服务器Rendering APIs React DOM Client React DOM Server 新的Strict Mode Behaviors 新Hooks React 18 中的新增功能 新功能:Automatic Batching 批处理是指 React 将多个状态更新分组到单个重新呈现中以获得更好的性能.在没有自动批处理的情况下,我们只在 React 事件处理程

  • React state状态属性详细讲解

    React state状态属性详细讲解

    目录 1. 基本使用 2. 使用setState操作state数据 3. 案例-toDoList 4. 案例-购物车 1. 基本使用 要点: 成员属性 state 它是一个特殊的属性,它是当前类的私有数据,只有在当前的组件中才能操作里面的数据 状态( state )即数据,是组件内部的私有数据,只能在组件内部使用,和vue中data差不多,不过它没有像vue中的data进行了数据劫持 state的值是对象,表示一个组件中可以有多个数据 通过this.state来获取状态,react 中没有做数据

  • React18新增特性介绍

    React 18 最新的特性批处理文件在同一个 函数中, 调用多次 useState 也只是会更新一次 function App() { const [count, setCount] = useState(0); const [flag, setFlag] = useState(false); function handleClick() { setCount(c => c + 1); // 不触发re-render setFlag(f => !f); // 不触发re-render //

  • 批处理经典入门教程！(从不懂到高手)第1/5页

    我们补充说明:批处理相对来说是比较简单的语言,大家可以通过多写多看别人的实例来学习,不懂的百度一下. 这是一篇技术教程,真心诚意会用很简单的文字表达清楚自己的意思,只要你识字就能看懂,就能学到知识.写这篇教程的目的,是让每一个看过这些文字的朋友记住一句话:如果爱可以让事情变的更简单,那么就让它简单吧!看这篇教程的方法,就是慢!慢慢的,如同品一个女人.一杯茗茶,你会发现很多以前就在眼前的东西突然变的很遥远,而有些很遥远的东西却又突然回到了眼前.. 先概述一下批处理是个什么东东.批处理的定义,至今我

  • 批处理入门手册之批处理常用DOS命令篇(echo、rem、cd、dir)

    1.1 学习echo  rem  cd  dir命令 学习要点: 1.显示信息:echo 2.注释语句:rem 3.目录切换:cd 4.列文件名:dir 一.显示信息:echo 在学习echo命令前我们先在C盘下建一个新文件夹bat,并建一个空的bat文件.例如我是的mybat.bat 好了,下面 我们开始<批处理入门手册>的第一章1.1节. 1.输出提示信息 格式:echo 你要输出的信息 例1 echo hello,world echo i will come back pause 执行显

  • windows批处理命令教程

    批处理文件是无格式的文本文件,它包含一条或多条命令.它的文件扩展名为 .bat 或 .cmd.在命令提示下键入批处理文件的名称,或者双击该批处理文件,系统就会调用Cmd.exe按照该文件中各个命令出现的顺序来逐个运行它们.使用批 处理文件(也被称为批处理程序或脚本),可以简化日常或重复性任务.当然我们的这个版本的主要内容是介绍批处理在入侵中一些实际运用,例如我们后面要提到 的用批处理文件来给系统打补丁.批量植入后门程序等.下面就开始我们批处理学习之旅吧. 一.简单批处理内部命令简介 1.echo

  • http200、301、304等状态码详解

    当浏览者访问一个网页时,浏览者的浏览器会向网页所在服务器发出请求.当浏览器接收并显示网页前,此网页所在的服务器会返回一个包含HTTP状态码的信息头(server header)用以响应浏览器的请求 HTTP状态码的英文为HTTP Status Code. 下面是常见的HTTP状态码: •200 - 请求成功 •301 - 资源(网页等)被永久转移到其它URL •404 - 请求的资源(网页等)不存在 •500 - 内部服务器错误 200表示正常0k,这个是地球人都知道的了. 301 Moved

随机推荐