startTransition

startTransition(action)

• 参考
  • startTransition(action)
• 用法
  • 将状态更新标记为非阻塞式转换

参考

startTransition(action)

startTransition 函数允许你将状态更新标记为转换。

import { startTransition } from 'react';

function TabContainer() {
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }
  // ...
}

请参见下面的更多示例。

参数

• action: 一个通过调用一个或多个set 函数来更新某些状态的函数。React 会立即调用action（不带参数），并将action 函数调用期间同步调度的所有状态更新标记为转换。在 action 中等待的任何异步调用都将包含在转换中，但目前需要在 await 之后用另一个 startTransition 包装任何 set 函数（请参阅故障排除）。标记为转换的状态更新将是非阻塞的，并且不会显示不需要的加载指示器。

返回值

startTransition 不返回任何值。

注意事项

• startTransition 没有提供跟踪转换是否挂起的方法。要在转换进行时显示挂起指示器，你需要使用useTransition。

• 只有在您可以访问该状态的set函数时，才能将更新包装到 Transition 中。如果您想响应某些 prop 或自定义 Hook 返回值启动 Transition，请尝试改用useDeferredValue。

• 传递给startTransition的函数会立即调用，并将在此函数执行期间发生的所有状态更新标记为 Transitions。例如，如果您尝试在setTimeout中执行状态更新，则它们不会被标记为 Transitions。

• 您必须在任何异步请求后的任何状态更新中包装另一个startTransition，以将其标记为 Transitions。这是一个已知的限制，我们将在未来修复（参见故障排除）。

• 标记为 Transition 的状态更新将被其他状态更新中断。例如，如果您在 Transition 中更新图表组件，但随后在图表处于重新渲染过程中开始输入文本，React 将在处理输入状态更新后重新启动图表组件的渲染工作。

• Transition 更新不能用于控制文本输入。

• 如果有多个正在进行的 Transitions，React 当前会将它们一起批处理。这是一种限制，可能会在未来的版本中移除。

用法

将状态更新标记为非阻塞式 Transition

您可以通过将状态更新包装在startTransition调用中来将其标记为Transition。

import { startTransition } from 'react';

function TabContainer() {
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }
  // ...
}

Transitions 允许您即使在低速设备上也能保持用户界面更新的响应速度。

使用 Transition，您的 UI 在重新渲染过程中保持响应。例如，如果用户点击了一个选项卡，但随后改变主意并点击了另一个选项卡，他们可以在无需等待第一个重新渲染完成的情况下执行此操作。