React 自动批处理：有多少次重新渲染？

Source: Dev.to

示例

import { useState } from 'react';

const App = () => {
  const [name, setName] = useState('');
  const [age, setAge] = useState(null);
  const [hobby, setHobby] = useState('');

  const displayPerson = () => {
    setName('Luiji');
    setAge(29);
    setHobby('swimming');
  };

  console.log('Component rendered');

  return (
    <>
      
### {name}

      
### {age}

      
#### Enjoys: {hobby}

      
        {name === 'Yoshi' ? 'Display Person' : 'Person Displayed'}
      
    
  );
};

export default App;

当你点击按钮时，组件只会 一次 重新渲染，而不是三次。这是因为 React 会自动把同一次事件循环中发生的状态更新进行批处理。

注意： 第一次 console.log 在初始渲染时执行；第二次在按钮点击触发重新渲染后执行。

什么是批处理？

批处理会把多个状态更新合并为一次渲染过程，从而减少不必要的工作并提升性能。在 React 18 中，自动批处理默认已启用，并适用于：

• 原生事件处理器（例如点击）
• 异步操作（例如 Promise）
• 超时和间隔（setTimeout、setInterval）

因为三个 setState 调用（setName、setAge、setHobby）都发生在同一次点击事件中，React 会将它们批处理，只执行一次渲染。