startTransition

startTransition(scope)

• 参考
  • startTransition(scope)
• 使用方法
  • 将 state 更新标记为非阻塞 transition

参考

startTransition(scope)

startTransition 函数可以将 state 更新标记为 transition。

import { startTransition } from 'react';

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

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

请看下面的更多例子。

参数

• scope: 一个调用一个或多个 set 函数 来更新 state 的函数。React 会立即调用没有参数的 scope，并将在 scope 函数调用期间，调度所有的 state，同步更新标记为 transition。它们将是 非阻塞的，并且 不会显示不想要的加载提示。

返回值

startTransition 不返回任何内容。

注意事项

• startTransition 没有提供一种跟踪 transition 是否处于待定状态的方法。为了在 transition 进行时显示一个待定状态的指示器，你需要使用 useTransition。

• 只有当你能访问某个 state 的 set 函数时，你才能将它的更新包裹到 transition 中。如果你想根据一些 prop 或自定义 Hook 的返回值来启动一个 transition，请尝试使用 useDeferredValue。

• 你传递给 startTransition 的函数必须是同步的。React 会立即执行此函数，将其执行期间发生的所有 state 更新标记为 transition。如果你想试着稍后执行更多的 state 更新（例如，在 timeout 中），它们不会被标记为转换。

• 一个被标记为 transition 的 state 更新时将会被其他 state 更新打断。例如，如果你在 transition 内部更新图表组件，但在图表重新渲染时在输入框中打字，则 React 将先处理输入 state 更新，之后才会重新启动对图表组件的渲染工作。

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

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

使用方法

将 state 更新标记为非阻塞 transition

你可以通过将一个 state 包裹在 startTransition 回调中，将其更新标记为一个 transition：

import { startTransition } from 'react';

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

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

transition 可以让用户界面在慢速设备上保持更新响应。

通过 transition，你的 UI 在重新渲染过程中保持响应。例如，如果用户单击一个选项卡后又改变主意并单击另一个选项卡，则可以在第一次重新渲染完成之前执行此操作而无需等待。