React 自动批处理：如何最小化重新渲染并提高性能-js教程-PHP中文网

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 中自动批处理如何工作的示例：

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 (
    <div>
      <p>{count}</p>
      <p>{text}</p>
      <button onClick={handleClick}>Update</button>
    </div>
  );
}

登录后复制

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

为什么它对性能很重要

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

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

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

自动批处理的常见用例

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

自动批处理适用于多种情况，包括：

事件处理程序：React 已经在事件处理程序中批量更新，但现在它可以更好地处理多个更新，而无需不必要的渲染。

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 (
    <div>
      <p>{count}</p>
      <p>{text}</p>
      <button onClick={handleClick}>Update</button>
    </div>
  );
}

登录后复制

效果和异步函数：使用 React 18，批处理可以在 setTimeout 和 Promise 等异步代码中无缝运行。

   function handleSubmit() {
     setFormSubmitted(true);
     setFormData({ ...formData, submittedAt: new Date() });
     // Only one re-render happens here
   }

登录后复制

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

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

什么是flushSync？

在某些情况下，您可能需要手动控制状态更新何时发生，特别是在处理动画或关键 UI 更新时。这就是 flushSync 发挥作用的地方。它强制 React 立即处理更新，而不是与其他更新一起批处理。

何时使用flushSync

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

这是flushSync的工作原理：

   setTimeout(() => {
     setLoading(false);
     setUser({ name: 'John' });
     // These state changes are batched, so only one re-render
   }, 1000);

登录后复制

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