」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > React 自動批次:如何最小化重新渲染並提高效能

React 自動批次:如何最小化重新渲染並提高效能

發佈於2024-11-09
瀏覽:177

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如有侵犯,請洽study_golang@163 .com刪除
最新教學 更多>
  • 如何使用PHP將斑點(圖像)正確插入MySQL?
    如何使用PHP將斑點(圖像)正確插入MySQL?
    essue VALUES('$this->image_id','file_get_contents($tmp_image)')";This code builds a string in PHP, but the function call fil...
    程式設計 發佈於2025-04-02
  • 如何正確使用與PDO參數的查詢一樣?
    如何正確使用與PDO參數的查詢一樣?
    在pdo 中使用類似QUERIES在PDO中的Queries時,您可能會遇到類似疑問中描述的問題:此查詢也可能不會返回結果,即使$ var1和$ var2包含有效的搜索詞。錯誤在於不正確包含%符號。 通過將變量包含在$ params數組中的%符號中,您確保將%字符正確替換到查詢中。沒有此修改,PD...
    程式設計 發佈於2025-04-02
  • 哪種在JavaScript中聲明多個變量的方法更可維護?
    哪種在JavaScript中聲明多個變量的方法更可維護?
    在JavaScript中聲明多個變量:探索兩個方法在JavaScript中,開發人員經常遇到需要聲明多個變量的需要。對此的兩種常見方法是:在單獨的行上聲明每個變量: 當涉及性能時,這兩種方法本質上都是等效的。但是,可維護性可能會有所不同。 第一個方法被認為更易於維護。每個聲明都是其自己的語句,使...
    程式設計 發佈於2025-04-02
  • 為什麼使用固定定位時,為什麼具有100%網格板柱的網格超越身體?
    為什麼使用固定定位時,為什麼具有100%網格板柱的網格超越身體?
    網格超過身體,用100%grid-template-columns 為什麼在grid-template-colms中具有100%的顯示器,當位置設置為設置的位置時,grid-template-colly修復了? 問題: 考慮以下CSS和html: class =“ snippet-code”> ...
    程式設計 發佈於2025-04-02
  • 如何從PHP中的Unicode字符串中有效地產生對URL友好的sl。
    如何從PHP中的Unicode字符串中有效地產生對URL友好的sl。
    為有效的slug生成首先,該函數用指定的分隔符替換所有非字母或數字字符。此步驟可確保slug遵守URL慣例。隨後,它採用ICONV函數將文本簡化為us-ascii兼容格式,從而允許更廣泛的字符集合兼容性。 接下來,該函數使用正則表達式刪除了不需要的字符,例如特殊字符和空格。此步驟可確保slug僅包...
    程式設計 發佈於2025-04-02
  • 如何干淨地刪除匿名JavaScript事件處理程序?
    如何干淨地刪除匿名JavaScript事件處理程序?
    刪除匿名事件偵聽器將匿名事件偵聽器添加到元素中會提供靈活性和簡單性,但是當要刪除它們時,可以構成挑戰,而無需替換元素本身就可以替換一個問題。 element? element.addeventlistener(event,function(){/在這里工作/},false); 要解決此問題,請考...
    程式設計 發佈於2025-04-02
  • 如何將來自三個MySQL表的數據組合到新表中?
    如何將來自三個MySQL表的數據組合到新表中?
    mysql:從三個表和列的新表創建新表 答案:為了實現這一目標,您可以利用一個3-way Join。 選擇p。 *,d.content作為年齡 來自人為p的人 加入d.person_id = p.id上的d的詳細信息 加入T.Id = d.detail_id的分類法 其中t.taxonomy ...
    程式設計 發佈於2025-04-02
  • 如何使用Python的請求和假用戶代理繞過網站塊?
    如何使用Python的請求和假用戶代理繞過網站塊?
    如何使用Python的請求模擬瀏覽器行為,以及偽造的用戶代理提供了一個用戶 - 代理標頭一個有效方法是提供有效的用戶式header,以提供有效的用戶 - 設置,該標題可以通過browser和Acterner Systems the equestersystermery和操作系統。通過模仿像Chro...
    程式設計 發佈於2025-04-02
  • 如何克服PHP的功能重新定義限制?
    如何克服PHP的功能重新定義限制?
    克服PHP的函數重新定義限制在PHP中,多次定義一個相同名稱的函數是一個no-no。嘗試這樣做,如提供的代碼段所示,將導致可怕的“不能重新列出”錯誤。 但是,PHP工具腰帶中有一個隱藏的寶石:runkit擴展。它使您能夠靈活地重新定義函數。 runkit_function_renction_...
    程式設計 發佈於2025-04-02
  • 您可以使用CSS在Chrome和Firefox中染色控制台輸出嗎?
    您可以使用CSS在Chrome和Firefox中染色控制台輸出嗎?
    在javascript console 中顯示顏色是可以使用chrome的控制台顯示彩色文本,例如紅色的redors,for for for for錯誤消息? 回答是的,可以使用CSS將顏色添加到Chrome和Firefox中的控制台顯示的消息(版本31或更高版本)中。要實現這一目標,請使用以下...
    程式設計 發佈於2025-04-02
  • 為什麼我會收到MySQL錯誤#1089:錯誤的前綴密鑰?
    為什麼我會收到MySQL錯誤#1089:錯誤的前綴密鑰?
    mySQL錯誤#1089:錯誤的前綴鍵錯誤descript [#1089-不正確的前綴鍵在嘗試在表中創建一個prefix鍵時會出現。前綴鍵旨在索引字符串列的特定前綴長度長度,可以更快地搜索這些前綴。 了解prefix keys `這將在整個Movie_ID列上創建標準主鍵。主密鑰對於唯一識...
    程式設計 發佈於2025-04-02
  • 如何在php中使用捲髮發送原始帖子請求?
    如何在php中使用捲髮發送原始帖子請求?
    如何使用php 創建請求來發送原始帖子請求,開始使用curl_init()開始初始化curl session。然後,配置以下選項: curlopt_url:請求 [要發送的原始數據指定內容類型,為原始的帖子請求指定身體的內容類型很重要。在這種情況下,它是文本/平原。要執行此操作,請使用包含以下標頭...
    程式設計 發佈於2025-04-02
  • 如何配置Pytesseract以使用數字輸出的單位數字識別?
    如何配置Pytesseract以使用數字輸出的單位數字識別?
    Pytesseract OCR具有單位數字識別和僅數字約束 在pytesseract的上下文中,在配置tesseract以識別單位數字和限制單個數字和限制輸出對數字可能會提出質疑。 To address this issue, we delve into the specifics of Te...
    程式設計 發佈於2025-04-02
  • 如何使用Regex在PHP中有效地提取括號內的文本
    如何使用Regex在PHP中有效地提取括號內的文本
    php:在括號內提取文本在處理括號內的文本時,找到最有效的解決方案是必不可少的。一種方法是利用PHP的字符串操作函數,如下所示: 作為替代 $ text ='忽略除此之外的一切(text)'; preg_match('#((。 &&& [Regex使用模式來搜索特...
    程式設計 發佈於2025-04-02
  • 為什麼我在Silverlight Linq查詢中獲得“無法找到查詢模式的實現”錯誤?
    為什麼我在Silverlight Linq查詢中獲得“無法找到查詢模式的實現”錯誤?
    查詢模式實現缺失:解決“無法找到”錯誤在銀光應用程序中,嘗試使用LINQ建立錯誤的數據庫連接的嘗試,無法找到以查詢模式的實現。 ”當省略LINQ名稱空間或查詢類型缺少IEnumerable 實現時,通常會發生此錯誤。 解決問題來驗證該類型的質量是至關重要的。在此特定實例中,tblpersoon可能...
    程式設計 發佈於2025-04-02

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3