”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > React 自动批处理:如何最小化重新渲染并提高性能

React 自动批处理:如何最小化重新渲染并提高性能

发布于2024-11-09
浏览:718

React Automatic Batching: How to Minimize Re-Renders and Boost Performance

在大型 React 应用程序中,浪费的重新渲染可能是一个严重的问题,它会降低性能并使您的应用程序感觉缓慢。在 React 18 中,自动批处理通过减少不必要的重新渲染来帮助优化性能,为开发人员提供更有效的方式来管理状态更新。本指南将引导您了解 React 18 中自动批处理的概念、为什么它对性能如此重要,以及如何在您的应用程序中充分利用它。

简介:大型 React 应用程序中浪费渲染的问题

假设您正在做饭,而不是一次制作所有菜肴,而是不断来回单独制作每道菜 - 显然效率不高,对吧?当状态更新被一一处理时,React 中也会发生同样的事情,导致多次渲染而不是一次渲染。这会导致处理浪费和性能下降,尤其是在大型应用程序中。

在 React 18 之前,同时发生的状态更新通常会导致多次重新渲染。 React 18 通过自动批处理解决了这个问题,它将多个更新分组到一个渲染周期中,从而减少不必要的重新渲染并提高性能。

React 18 中的自动批处理是什么?

看看新功能

自动批处理是React 18中引入的一项功能,它允许React处理同一事件或效果中的多个状态更新,然后仅触发一次重新渲染。这可以最大限度地减少渲染次数并提高应用程序的整体性能。

在 React 18 之前,批处理仅应用于事件处理程序内部。然而,React 18 将批处理扩展到 setTimeout、Promise 和事件侦听器等异步函数中的所有 更新,使其更加强大和全面。

自动配料示例

以下是 React 18 中自动批处理如何工作的示例:


从 'react' 导入 { useState }; 函数 MyComponent() { const [count, setCount] = useState(0); const [文本,setText] = useState(''); 函数handleClick() { setCount(计数 1); setText('更新'); // 两次更新都是批量的,并且只发生一次重新渲染 } 返回 (

{计数}

{文本}

); }
import { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  function handleClick() {
    setCount(count   1);
    setText('Updated');
    // Both updates are batched, and only one re-render happens
  }

  return (
    

{count}

{text}

); }
在上面的代码中,计数和文本的状态更新被一起批处理,触发一次重新渲染而不是两次。这要归功于 React 18 的自动批处理。

为什么它对性能很重要

它如何减少不必要的重新渲染

在React中,每次状态改变时,都会发生重新渲染。如果您有多个状态更新相继发生,就像在事件处理程序中一样,React 通常会触发多个渲染。这可能会减慢您的应用程序的速度,尤其是在扩展时。

自动批处理将这些状态更新合并到单个渲染通道中。想象一下,如果您正在填写一个包含多个字段的表单,并且每个输入更改都会导致整个表单重新呈现。通过自动批处理,React 一次性处理所有这些更改,使 UI 感觉更流畅、更快。

自动批处理的常见用例

事件处理程序和效果中的状态更新示例

自动批处理适用于多种情况,包括:

  1. 事件处理程序:React 已经在事件处理程序中批量更新,但现在它可以更好地处理多个更新,而无需不必要的渲染。
函数handleSubmit() { 设置表单提交(真); setFormData({ ...formData, SubmitAt: new Date() }); // 这里只发生一次重新渲染 }
import { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  function handleClick() {
    setCount(count   1);
    setText('Updated');
    // Both updates are batched, and only one re-render happens
  }

  return (
    

{count}

{text}

); }
  1. 效果和异步函数:在 React 18 中,批处理可以在 setTimeout 和 Promise 等异步代码中无缝运行。
setTimeout(() => { 设置加载(假); setUser({ 名称: '约翰' }); // 这些状态变化是批量的,所以只有一次重新渲染 }, 1000);
import { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  function handleClick() {
    setCount(count   1);
    setText('Updated');
    // Both updates are batched, and only one re-render happens
  }

  return (
    

{count}

{text}

); }
这意味着即使在异步操作中,React 也可以将多个更新组合在一起,从而提高性能并最大限度地减少重新渲染的次数。

使用flushSync进行手动批处理:何时以及为何应使用它

什么是flushSync?

在某些情况下,您可能需要手动控制何时发生状态更新,特别是在处理动画或关键 UI 更新时。这就是

flushSync 发挥作用的地方。它强制 React 立即处理更新,而不是与其他更新一起批处理。

何时使用flushSync

在需要确保状态立即更新并反映在 DOM 中的场景中,您应该使用flushSync,而不是等待 React 批量更新。在时间至关重要的情况下(例如动画或即时视觉反馈),这通常是必要的。

flushSync 的工作原理如下:


从'react-dom'导入{flushSync}; 函数handleClick() { 刷新同步(()=> { setCount(计数 1); }); // 状态改变后 DOM 立即更新 console.log('更新计数:', count); }
import { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  function handleClick() {
    setCount(count   1);
    setText('Updated');
    // Both updates are batched, and only one re-render happens
  }

  return (
    

{count}

{text}

); }
在此示例中,React 立即处理 setCount 更新,确保 DOM 立即反映更改,这对于时间敏感的操作非常有用。

结论:批处理如何帮助优化现代应用程序中的 React 性能

React 18 的

自动批处理是一项改变游戏规则的功能,它通过减少不必要的重新渲染来优化性能,使您的应用程序运行得更快、更流畅。通过将状态更新分组到单个渲染中,React 确保您的应用程序的 UI 保持响应灵敏且高效,即使在扩展时也是如此。

对于大多数用例,自动批处理开箱即用,但如果您需要更多控制,可以使用

flushSync 实时处理更新。

通过利用这些功能,开发人员现在可以最大限度地减少浪费的渲染并提高 React 应用程序的整体性能,确保更好的用户体验。


准备好通过自动批处理来优化您的 React 应用程序了吗? 尝试在您的下一个项目中实现此功能,看看它对您的应用程序性能有何提升!


如果您喜欢这篇文章,请考虑支持我的工作:

    请我喝杯咖啡
  • 致电寻求指导或职业建议
  • 在 Twitter 上关注我
  • 在 LinkedIn 上连接
版本声明 本文转载于:https://dev.to/paharihacker/react-18-automatic-batching-how-to-minimize-re-renders-and-boost-performance-15oc?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • Java中假唤醒真的会发生吗?
    Java中假唤醒真的会发生吗?
    在Java中的浪费唤醒:真实性或神话?在Java同步中伪装唤醒的概念已经是讨论的主题。尽管存在这种行为的潜力,但问题仍然存在:它们实际上是在实践中发生的吗? Linux的唤醒机制根据Wikipedia关于伪造唤醒的文章,linux实现了pthread_cond_wait()功能的Linux实现,利用...
    编程 发布于2025-05-15
  • 在Python中如何创建动态变量?
    在Python中如何创建动态变量?
    在Python 中,动态创建变量的功能可以是一种强大的工具,尤其是在使用复杂的数据结构或算法时,Dynamic Variable Creation的动态变量创建。 Python提供了几种创造性的方法来实现这一目标。利用dictionaries 一种有效的方法是利用字典。字典允许您动态创建密钥并分...
    编程 发布于2025-05-15
  • PHP SimpleXML解析带命名空间冒号的XML方法
    PHP SimpleXML解析带命名空间冒号的XML方法
    在php 很少,请使用该限制很大,很少有很高。例如:这种技术可确保可以通过遍历XML树和使用儿童()方法()方法的XML树和切换名称空间来访问名称空间内的元素。
    编程 发布于2025-05-15
  • 如何使用不同数量列的联合数据库表?
    如何使用不同数量列的联合数据库表?
    合并列数不同的表 当尝试合并列数不同的数据库表时,可能会遇到挑战。一种直接的方法是在列数较少的表中,为缺失的列追加空值。 例如,考虑两个表,表 A 和表 B,其中表 A 的列数多于表 B。为了合并这些表,同时处理表 B 中缺失的列,请按照以下步骤操作: 确定表 B 中缺失的列,并将它们添加到表的末...
    编程 发布于2025-05-15
  • 为什么使用Firefox后退按钮时JavaScript执行停止?
    为什么使用Firefox后退按钮时JavaScript执行停止?
    导航历史记录问题:JavaScript使用Firefox Back Back 此行为是由浏览器缓存JavaScript资源引起的。要解决此问题并确保在后续页面访问中执行脚本,Firefox用户应设置一个空功能。 警报'); }; alert('inline Alert')...
    编程 发布于2025-05-15
  • 为什么不使用CSS`content'属性显示图像?
    为什么不使用CSS`content'属性显示图像?
    在Firefox extemers属性为某些图像很大,&& && && &&华倍华倍[华氏华倍华氏度]很少见,却是某些浏览属性很少,尤其是特定于Firefox的某些浏览器未能在使用内容属性引用时未能显示图像的情况。这可以在提供的CSS类中看到:。googlepic { 内容:url(&#...
    编程 发布于2025-05-15
  • 如何使用替换指令在GO MOD中解析模块路径差异?
    如何使用替换指令在GO MOD中解析模块路径差异?
    在使用GO MOD时,在GO MOD 中克服模块路径差异时,可能会遇到冲突,其中3个Party Package将另一个PAXPANCE带有导入式套件之间的另一个软件包,并在导入式套件之间导入另一个软件包。如回声消息所证明的那样: go.etcd.io/bbolt [&&&&&&&&&&&&&&&&...
    编程 发布于2025-05-15
  • CSS强类型语言解析
    CSS强类型语言解析
    您可以通过其强度或弱输入的方式对编程语言进行分类的方式之一。在这里,“键入”意味着是否在编译时已知变量。一个例子是一个场景,将整数(1)添加到包含整数(“ 1”)的字符串: result = 1 "1";包含整数的字符串可能是由带有许多运动部件的复杂逻辑套件无意间生成的。它也可以是故意从单个真理...
    编程 发布于2025-05-15
  • 如何从Google API中检索最新的jQuery库?
    如何从Google API中检索最新的jQuery库?
    从Google APIS 问题中提供的jQuery URL是版本1.2.6。对于检索最新版本,以前有一种使用特定版本编号的替代方法,它是使用以下语法:获取最新版本:未压缩)While these legacy URLs still remain in use, it is recommended ...
    编程 发布于2025-05-15
  • 如何在GO编译器中自定义编译优化?
    如何在GO编译器中自定义编译优化?
    在GO编译器中自定义编译优化 GO中的默认编译过程遵循特定的优化策略。 However, users may need to adjust these optimizations for specific requirements.Optimization Control in Go Compi...
    编程 发布于2025-05-15
  • Python中嵌套函数与闭包的区别是什么
    Python中嵌套函数与闭包的区别是什么
    嵌套函数与python 在python中的嵌套函数不被考虑闭合,因为它们不符合以下要求:不访问局部范围scliables to incling scliables在封装范围外执行范围的局部范围。 make_printer(msg): DEF打印机(): 打印(味精) ...
    编程 发布于2025-05-15
  • 如何在Java中正确显示“ DD/MM/YYYY HH:MM:SS.SS”格式的当前日期和时间?
    如何在Java中正确显示“ DD/MM/YYYY HH:MM:SS.SS”格式的当前日期和时间?
    如何在“ dd/mm/yyyy hh:mm:mm:ss.ss”格式“ gormat 解决方案:的,请访问量很大,并应为procectiquiestate的,并在整个代码上正确格式不多: java.text.simpledateformat; 导入java.util.calendar; 导入java...
    编程 发布于2025-05-15
  • 同实例无需转储复制MySQL数据库方法
    同实例无需转储复制MySQL数据库方法
    在同一实例上复制一个MySQL数据库而无需转储在同一mySQL实例上复制数据库,而无需创建InterMediate sqql script。以下方法为传统的转储和IMPORT过程提供了更简单的替代方法。 直接管道数据 MySQL手动概述了一种允许将mysqldump直接输出到MySQL clie...
    编程 发布于2025-05-15
  • Java字符串非空且非null的有效检查方法
    Java字符串非空且非null的有效检查方法
    检查字符串是否不是null而不是空的 if(str!= null && str.isementy())二手: if(str!= null && str.length()== 0) option 3:trim()。isement(Isement() trim whitespace whitesp...
    编程 发布于2025-05-15

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3