startTransition

startTransition(action)

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

参考

startTransition(action)

startTransition 函数让你可以将一次状态更新标记为 Transition。

import { startTransition } from 'react';

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

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

查看更多示例。

参数

• action: 一个通过调用一个或多个 set 函数 来更新某些状态的函数。React 会立即以不带参数的方式调用 action，并将 action 函数调用期间同步安排的所有状态更新标记为 Transitions。action 中 await 的任何异步调用都将包含在 transition 中，但目前需要在 await 之后的任何 set 函数外再包一层额外的 startTransition（参见 故障排除）。标记为 Transitions 的状态更新将是非阻塞的，并且不会显示不需要的加载指示器。

返回值

startTransition 不返回任何内容。

注意事项

• startTransition 不提供跟踪 Transition 是否正在挂起的方法。要在 Transition 进行中显示挂起指示器，你需要改用 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 在重新渲染过程中仍能保持响应。例如，如果用户点击了一个标签页，但随后改变主意又点击了另一个标签页，他们无需等待第一次重新渲染完成就可以这样做。