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 之後的任何 set 函式包裝在額外的 startTransition 中（請參閱疑難排解）。標記為轉換的狀態更新將非阻塞，並且不會顯示不需要的加載指示器。

回傳值

startTransition 不會回傳任何值。

注意事項

• startTransition 不提供追蹤轉換是否正在進行的方法。要在轉換進行時顯示一個待處理指示器，您需要使用 useTransition 。

• 只有在您可以存取該狀態的 set 函式時，才能將更新包裝到轉換中。如果您想響應某些 prop 或自定義 Hook 回傳值來啟動轉換，請嘗試使用 useDeferredValue 。

• 傳遞給

  您必須將任何非同步請求後的狀態更新包裝在另一個 startTransition 中，以將它們標記為轉變。這是已知的限制，我們將來會修復（請參見疑難排解）。

• 標記為轉變的狀態更新會被其他狀態更新中斷。例如，如果您在轉變期間更新圖表組件，但在圖表重新渲染過程中開始在輸入框中輸入內容，React 會在處理輸入狀態更新後重新開始圖表組件的渲染工作。

• 轉變更新不能用於控制文字輸入。

• 如果有多個正在進行的轉變，React 目前會將它們批次處理在一起。這是一個限制，可能會在未來的版本中移除。

import { startTransition } from 'react';

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

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