startTransition

startTransition(action)

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

参考

🌐 Reference

startTransition(action)

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

🌐 The startTransition function lets you mark a state update as a Transition.

import { startTransition } from 'react';

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

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

查看更多示例。

参数

🌐 Parameters

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

返回

🌐 Returns

startTransition 不返回任何值。

注意事项

🌐 Caveats

• startTransition 不提供跟踪过渡是否待处理的方法。要在过渡进行时显示待处理指示器，你需要使用 useTransition 。
• 只有在你可以访问该状态的 set 函数时，才能将更新封装到 Transition 中。如果你想根据某个 prop 或自定义 Hook 的返回值启动 Transition，请尝试使用 useDeferredValue 。
• 你传递给 startTransition 的函数会立即被调用，标记在其执行期间发生的所有状态更新为过渡（Transitions）。例如，如果你尝试在 setTimeout 中执行状态更新，它们将不会被标记为过渡（Transitions）。
• 你必须将任何异步请求后的状态更新封装在另一个 startTransition 中，以将它们标记为过渡。这是一个已知的限制，我们将在未来修复（参见 故障排除）。
• 被标记为过渡的状态更新会被其他状态更新中断。例如，如果你在一个过渡中更新图表组件，但在图表重新渲染的过程中开始在输入框中输入，React 会在处理输入状态更新后重新启动图表组件的渲染工作。
• 转场更新不能用于控制文本输入。
• 如果有多个正在进行的过渡，React 当前会将它们一起批处理。这是一个可能在未来版本中被移除的限制。

用法

🌐 Usage

将状态更新标记为非阻塞转换

🌐 Marking a state update as a non-blocking Transition

你可以通过将状态更新封装在 startTransition 调用中，将其标记为 过渡：

🌐 You can mark a state update as a Transition by wrapping it in a startTransition call:

import { startTransition } from 'react';

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

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

转场让你即使在速度较慢的设备上也能保持用户界面更新的响应。

🌐 Transitions let you keep the user interface updates responsive even on slow devices.

使用过渡（Transition），你的用户界面在重新渲染的过程中仍然保持响应。例如，如果用户点击了一个标签页，但随后改变主意又点击另一个标签页，他们可以在不等待第一次重新渲染完成的情况下这样做。

🌐 With a Transition, your UI stays responsive in the middle of a re-render. For example, if the user clicks a tab but then change their mind and click another tab, they can do that without waiting for the first re-render to finish.