概述
React 18增加了开箱即用的性能改进，默认做了更多的批处理，不再需要在应用程序或库代码中手动批处理更新。这篇文章将解释什么是批处理，它以前是如何工作的，以及有什么变化。
注意：这是一个我们不希望大多数用户需要考虑的深入功能。但是，它可能与教育工作者和图书馆开发人员有关。
什么是批处理？
分批是指React将多个状态更新分组到一个重新渲染中以获得更好的性能。
例如，如果你在同一个点击事件里有两个状态更新，React总是把它们分到一个重新渲染中。如果你运行下面的代码，你会看到每次点击时，React只执行一次渲染，尽管你设置了两次状态。
function App() {
const [count, setCount] = useState(0);
const [flag, setFlag] = useState(false);
function handleClick() {
setCount(c => c + 1); // 还没有重新渲染
setFlag(f => !f); // 还没有重新渲染
// React 只会在最后重新渲染一次（这是批处理！）
}
return (
<div>
<button onClick={handleClick}>Next</button>
<h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
</div>
);
}
- ✅ Demo: React 17 事件处理程序中的批处理. (注意在控制台中每次点击都有一个渲染)
这对性能非常有用，因为它避免了不必要的重新渲染。它还可以防止您的组件呈现仅更新一个状态变量的“半完成”状态，这可能会导致错误。这可能会提醒您，当您选择第一道菜时，餐厅服务员不会跑到厨房，而是等您完成订单。
然而，React 关于何时批量更新并不一致。例如，如果你需要获取数据，然后在上面的 handleClick 中更新 state，那么 React 不会批量更新，而是执行两次独立的更新。
这是因为React过去只在浏览器事件（如点击）期间进行批量更新，但在这里，我们是在事件已经被处理后（在fetch callback）才更新状态。
function App() {
const [count, setCount] = useState(0);
const [flag, setFlag] = useState(false);
function handleClick() {
fetchSomething().then(() => {
// React 17 and earlier does NOT batch these because
// they run *after* the event in a callback, not *during* it
setCount(c => c + 1); // Causes a re-render
setFlag(f => !f); // Causes a re-render
});
}
return (
<div>
<button onClick={handleClick}>Next</button>
<h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
</div>
);
}
- 🟡 Demo: React 17 不批处理外部事件处理程序. (注意控制台中每次点击两次渲染)
在 React 18 之前，我们只在 React 事件处理程序期间批量更新。默认情况下，React 中不会对 promise、setTimeout、原生事件处理程序或任何其他事件中的更新进行批处理。
什么是自动批处理？
从带有 createRoot 的 React 18 开始，所有更新都将自动批处理，无论它们来自何处。
这意味着timeouts、promises、native events处理程序或任何其他事件内的更新将以与 React 事件内的更新相同的方式进行批处理。我们希望这会导致更少的渲染工作，从而在您的应用程序中获得更好的性能：
function App() {
const [count, setCount] = useState(0);
const [flag, setFlag] = useState(false);
function handleClick() {
fetchSomething().then(() => {
// React 18和更高版本会批量处理这些内容
setCount(c => c + 1);
setFlag(f => !f);
// React 只会在最后重新渲染一次（这是批处理！）
});
}
return (
<div>
<button onClick={handleClick}>Next</button>
<h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
</div>
);
}
- ✅ Demo: 即使在事件处理程序之外，也可以使用 createRoot 批处理 React 18! (注意控制台中的每次点击渲染！)
- 🟡 Demo: 带有旧版渲染的 React 18 保留了旧行为 (请注意控制台中每次单击两次渲染)
注意：作为采用React 18的一部分，预计你会升级到createRoot。渲染的旧行为只是为了使两个版本的生产实验更容易进行。
无论更新发生在何处，React 都会自动批量更新，因此：
function handleClick() {
setCount(c => c + 1);
setFlag(f => !f);
// React 只会在最后重新渲染一次（这是批处理！）
}
行为与此相同：
setTimeout(() => {
setCount(c => c + 1);
setFlag(f => !f);
// React 只会在最后重新渲染一次（这是批处理！）
}, 1000);
行为与此相同：
fetch(/*...*/).then(() => {
setCount(c => c + 1);
setFlag(f => !f);
// React 只会在最后重新渲染一次（这是批处理！）
})
行为与此相同：
elm.addEventListener('click', () => {
setCount(c => c + 1);
setFlag(f => !f);
// React 只会在最后重新渲染一次（这是批处理！）
});
注意：React 仅在通常安全的情况下才批量更新。例如，React 确保对于每个用户启动的事件（如单击或按键），DOM 在下一个事件之前完全更新。例如，这可确保在提交时禁用的表单不能被提交两次。
如果我不想批处理怎么办？
通常，批处理是安全的，但某些代码可能依赖于在状态更改后立即从 DOM 中读取某些内容。对于这些用例，您可以使用 ReactDOM.flushSync() 选择退出批处理：
import { flushSync } from 'react-dom'; // Note: react-dom, not react
function handleClick() {
flushSync(() => {
setCounter(c => c + 1);
});
// React 现在已经更新了 DOM
flushSync(() => {
setFlag(f => !f);
});
// React 现在已经更新了 DOM
}
我们不期望这是个普遍现象
这对 Hooks 有什么影响吗？
如果您使用 Hooks，我们希望自动批处理在绝大多数情况下都能“正常工作”。 （如果没有，请告诉我们！）
这对 Classes 有什么影响吗？
请记住，更新 期间 React 事件处理程序一直是批处理的，因此对于这些更新没有任何更改。
在类组件中存在边缘情况，这可能是一个问题。
类组件有一个实现的怪癖，它可以同步读取事件内部的状态更新。这意味着您将能够在调用 setState 之间读取 this.state：
handleClick = () => {
setTimeout(() => {
this.setState(({ count }) => ({ count: count + 1 }));
// { count: 1, flag: false }
console.log(this.state);
this.setState(({ flag }) => ({ flag: !flag }));
});
};
在React 18中，情况不再是这样了。因为即使在setTimeout中的所有更新都是分批进行的，React不会同步渲染第一个setState的结果--渲染发生在浏览器的下一个时间段。所以渲染还没有发生。
handleClick = () => {
setTimeout(() => {
this.setState(({ count }) => ({ count: count + 1 }));
// { count: 0, flag: false }
console.log(this.state);
this.setState(({ flag }) => ({ flag: !flag }));
});
};
见 sandbox.
如果这是升级到 React 18 的障碍，您可以使用 ReactDOM.flushSync 强制更新，但我们建议谨慎使用：
handleClick = () => {
setTimeout(() => {
ReactDOM.flushSync(() => {
this.setState(({ count }) => ({ count: count + 1 }));
});
// { count: 1, flag: false }
console.log(this.state);
this.setState(({ flag }) => ({ flag: !flag }));
});
};
见 sandbox.
这个问题并不影响带有Hooks的函数组件，因为设置状态并不更新来自useState的现有变量。
function handleClick() {
setTimeout(() => {
console.log(count); // 0
setCount(c => c + 1);
setCount(c => c + 1);
setCount(c => c + 1);
console.log(count); // 0
}, 1000)
虽然当您采用 Hooks 时这种行为可能令人惊讶，但它为自动批处理铺平了道路。
unstable_batchedUpdates 怎么样？
一些React库使用这个未记录的API来强制事件处理程序之外的setState被分批处理。
import { unstable_batchedUpdates } from 'react-dom';
unstable_batchedUpdates(() => {
setCount(c => c + 1);
setFlag(f => !f);
});
这个 API 在 18 中仍然存在，但不再需要它了，因为批处理是自动发生的。我们不会在 18 中删除它，尽管在流行的库不再依赖于它的存在之后，它可能会在未来的主要版本中被删除。
