React18之状态批处理的使用

更新时间：2022年05月03日 10:58:55 作者：yjwlike

本文主要介绍了React18之状态批处理的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

状态自动批处理

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 状态批处理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

React Store及store持久化的使用教程
这篇文章主要介绍了React Store及store持久化的使用教程,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-01-01
详解React中setState回调函数
这篇文章主要介绍了详解React中setState回调函数，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06
useState 解决文本框无法输入的问题详解
这篇文章主要为大家介绍了useState 解决文本框无法输入的问题详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
使用react的7个避坑案例小结
React是个很受欢迎的前端框架。今天我们探索下React开发者应该注意的七点，感兴趣的小伙伴们可以参考一下
2021-05-05
react源码层深入刨析babel解析jsx实现
同作为MVVM框架，React相比于Vue来讲，上手更需要JavaScript功底深厚一些，本系列将阅读React相关源码，从jsx -> VDom -> RDOM等一些列的过程，将会在本系列中一一讲解
2022-10-10
详解React如何获取状态的旧值
最近刚开始接触 React,突然脑海出现一个问题,React中怎么在状态更新时获取它的旧值,特别是如果你之前用过 Vue,你可能会想知道 React 中有没有类似 Vue 的 watch 属性,那么react中怎么实现呢？本文就给大家介绍一下React如何获取状态的旧值,需要的朋友可以参考下
2024-07-07
React Native开发封装Toast与加载Loading组件示例
这篇文章主要介绍了React Native开发封装Toast与加载Loading组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
比ant更丰富Modal组件功能实现示例详解
这篇文章主要为大家介绍了比ant更丰富Modal组件功能实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
React Fiber 链表操作及原理示例详解
这篇文章主要为大家介绍了React Fiber 链表操作原理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
react组件的创建与更新实现流程详解
React组件分为函数组件与class组件；函数组件是无状态组件，class称为类组件；函数组件只有props，没有自己的私有数据和生命周期函数；class组件有自己私有数据(this.state)和生命周期函数
2022-10-10