startTransition

startTransition(scope)

• 参考
  • startTransition(scope)
• 用法
  • 将状态更新标记为非阻塞过渡

参考

startTransition(scope)

startTransition 函数允许您将状态更新标记为过渡。

import { startTransition } from 'react';

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

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

请参阅下面的更多示例。

参数

• scope：一个通过调用一个或多个 set 函数来更新某些状态的函数。React 会立即调用 scope，不带任何参数，并将 scope 函数调用期间同步调度的所有状态更新标记为过渡。它们将是非阻塞的，并且不会显示不必要的加载指示器。

返回值

startTransition 不返回任何内容。

注意事项

• startTransition 不提供跟踪过渡是否正在进行的方法。要在过渡进行时显示“正在进行”指示器，您需要改用 useTransition。

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

• 您传递给 startTransition 的函数必须是同步的。React 会立即执行此函数，将执行期间发生的所有状态更新标记为过渡。如果您尝试稍后执行更多状态更新（例如，在超时中），它们将不会被标记为过渡。

• 标记为“Transition（过渡）”的状态更新会被其他状态更新中断。例如，如果您在 Transition 中更新图表组件，但在图表处于重新渲染过程中开始在输入框中键入内容，则 React 会在处理输入状态更新后重新启动图表组件的渲染工作。

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

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

用法

将状态更新标记为非阻塞过渡

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

import { startTransition } from 'react';

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

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

即使在速度较慢的设备上，过渡也可以保持用户界面更新的响应性。

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