0Pricing
React Academy · 课时

使用 useTransition 实现非阻塞式界面更新

将耗时的状态更新包裹在 startTransition 中，让界面保持响应。

使用 useTransition 实现非阻塞式界面更新 是 CoddyKit 上的免费 React Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

欢迎

在本课中，您将使用 useTransition 钩子将开销较大的状态更新标记为非紧急更新，让界面保持响应，同时在后台进行繁重的渲染。

阻塞式更新问题

当您在搜索框中输入内容来筛选大型列表时，React 必须在每次击键时重新渲染整个筛选列表。这会阻塞输入框的即时更新，让界面感觉迟钝。

React 并发模式

React 18 引入了并发渲染：React 可以开始渲染状态更新、暂停渲染，并优先处理更紧急的更新（例如输入）。useTransition 就是用于将更新归类为低优先级过渡的钩子。

useTransition 基础

useTransition 返回 `[isPending, startTransition]`。请将非紧急的状态更新放在 `startTransition()` 中。React 会优先处理其他更新（例如受控输入），而不是过渡更新。
const [isPending, startTransition] = useTransition();

const handleChange = (e) => {
  setInputValue(e.target.value); // urgent: update input immediately
  startTransition(() => {
    setFilteredList(filter(e.target.value)); // non-urgent
  });
};

使用 isPending 显示加载界面

过渡处理期间，`isPending` 的值为 `true`。您可以使用它显示加载指示器，或调暗过时的结果列表，让用户知道更新正在进行。
return (
  <>
    <input value={inputValue} onChange={handleChange} />
    {isPending && <Spinner />}
    <ResultList items={filteredList} />
  </>
);

startTransition 中应放入什么

只能将状态更新放入 startTransition 中，不要放入异步操作。需要包裹的是会触发开销较大渲染的状态更新。
// Correct
startTransition(() => setTab('heavy'));

// Wrong — async work outside React state
startTransition(async () => { await fetch(...); }); // not supported

不使用钩子的 startTransition

如果您不需要 `isPending`，可以直接从 React 导入并调用 `startTransition`，无需使用该钩子。
import { startTransition } from 'react';

startTransition(() => setQuery(newValue));

切换标签页示例

一个常见用例是：点击标签页切换繁重的组件。请将标签页切换放入 startTransition 中，这样活动标签页指示器会立即更新，而繁重的组件则在后台渲染。
const [tab, setTab] = useState('posts');
const [isPending, startTransition] = useTransition();

const selectTab = (t) =>
  startTransition(() => setTab(t));

useTransition 与 useDeferredValue

当您 OWN 状态更新时（也就是调用 setState），请使用 useTransition。当您接收无法直接延迟的属性或值时，请使用 useDeferredValue——它会延迟值本身。

不能替代优化

startTransition 不会让渲染速度更快，只会推迟渲染。如果组件需要 500ms 才能渲染，仍然需要 500ms。对于真正缓慢的列表，请结合使用 React.memo 或虚拟化。

快速检查

useTransition 返回的 isPending 表示什么？

回顾

useTransition 可以将状态更新归类为非紧急过渡。紧急更新（例如输入）会立即渲染；过渡更新会在 React 有处理能力时渲染。请使用 isPending 显示加载反馈。

下一课

下一课：**使用 useDeferredValue 实现输入防抖**——您将延迟界面中缓慢部分的重新渲染，同时保持输入灵敏迅速。

常见问题解答

「使用 useTransition 实现非阻塞式界面更新」课时是免费的吗？

是的 — 「使用 useTransition 实现非阻塞式界面更新」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「使用 useTransition 实现非阻塞式界面更新」这节课中我会学到什么？

将耗时的状态更新包裹在 startTransition 中，让界面保持响应。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。

「使用 useTransition 实现非阻塞式界面更新」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 竞态条件与 Effect 清理
  2. 使用 useTransition 实现非阻塞式界面更新
  3. 使用 useDeferredValue 实现输入防抖
  4. 使用 Suspense 划分数据与代码边界
← 返回 React Academy