ReactJS - startTransition()

---

---

StartTransition 是一個 React 函式，允許開發人員更新應用程式的狀態而不會中斷使用者介面。換句話說，它允許我們在保持 Web 應用不變得緩慢或無響應的情況下進行狀態更新。

startTransition 函式用於將狀態更新標記為“過渡”。當我們需要同時進行多個狀態更新時，它非常有用。React 透過將它們識別為過渡來確保這些更新是非阻塞的，這意味著它們不會產生不必要的載入指示器或使我們的應用感覺緩慢。

語法

startTransition(scope)

引數

scope − 它是一個函式，呼叫一個或多個 set 函式來更新某些狀態。React 直接呼叫 scope 且不帶任何引數，並且在 scope 函式呼叫期間安排的所有同步狀態更新都被標記為過渡。它們不會阻塞流量，也不會顯示不必要的載入訊號。

返回值

此函式不返回任何內容。

示例

示例 - 基本示例

在這個示例應用中，我們將有一個簡單的計數器，當按鈕被點選時遞增。startTransition 函式用於使更新更平滑。因此，此應用的程式碼如下所示：

import React, { useState, startTransition } from 'react';

function BasicApp() {
   const [count, setCount] = useState(0);   
   const handleClick = () => {
      startTransition(() => {
         setCount(count + 1);
      });
   };
   
   return (
      <div>
         <p>Count: {count}</p>
         <button onClick={handleClick}>Increment</button>
      </div>
   );
}

export default BasicApp;

輸出

示例 - 列表渲染

在這個示例中，我們在向列表中新增專案時使用 startTransition 函式，以確保流暢的使用者體驗。因此，我們還將有一個按鈕來向列表中新增專案，透過點選該專案，新專案將被新增到列表中。因此，此應用的程式碼如下所示：

import React, { useState, startTransition } from 'react';

function ListApp() {
   const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']);   
   const handleAddItem = () => {
      startTransition(() => {
         setItems([...items, `Item ${items.length + 1}`]);
      });
   };
   
   return (
      <div>
         <ul>
            {items.map((item, index) => (
            <li key={index}>{item}</li>
            ))}
         </ul>
         <button onClick={handleAddItem}>Add Item</button>
      </div>
   );
}

export default ListApp;

輸出

示例 - 在選項卡之間切換

要使用 startTransition，我們需要遵循以下步驟：

• 首先，我們必須在程式碼中匯入 React 的 startTransition 方法。

• 現在，藉助 useState，我們可以在元件或方法中定義我們想要更新的狀態。

• 現在，我們可以編寫一個執行狀態更新的函式，然後將其包裝在 startTransition 呼叫中。

• 因此，當我們呼叫 startTransition 時，React 會被指示將狀態更新視為過渡，這使其成為非阻塞的。

應用包括：

步驟 1 - 我們將匯入 useState 和 startTransition 方法。

步驟 2 - 我們將在 TabSwitcher 元件中定義 currentTab 狀態變數，它跟蹤當前選定的選項卡。

步驟 3 - 我們將定義 switchTab 函式，它以選項卡名稱作為輸入。要更新 currentTab 狀態，此函式呼叫 startTransition。我們透過將此狀態更新包含在 startTransition 中來確保選項卡切換是非阻塞的並且不會導致 UI 變得無響應。

步驟 4 - render 方法顯示兩個選項卡及其關聯的內容。當我們點選選項卡按鈕時，會呼叫 switchTab 函式，該函式以非阻塞方式重新整理選定的選項卡。

import React, { useState, startTransition } from 'react';

function App() {
   const [currentTab, setCurrentTab] = useState('Tab 1');   
   const switchTab = (tabName) => {
      startTransition(() => {
         setCurrentTab(tabName);
      });
   };
   
   return (
      <div>
         <h1>Tab Switcher</h1>
         <div className="tabs">
            <button
               className={currentTab === 'Tab 1' ? 'active-tab' : 'tab'}
               onClick={() => switchTab('Tab 1')}
            >
               Tab 1
            </button>
            <button
               className={currentTab === 'Tab 2' ? 'active-tab' : 'tab'}
               onClick={() => switchTab('Tab 2')}
            >
               Tab 2
            </button>
         </div>
         <div className="tab-content">
            {currentTab === 'Tab 1' && <p>This is the content of Tab 1.</p>}
            {currentTab === 'Tab 2' && <p>This is the content of Tab 2.</p>}
         </div>
      </div>
   );
}

export default App;

輸出

侷限性

• startTransition 無法幫助跟蹤掛起的過渡。要在過渡期間顯示載入指示器，請使用 useTransition。

• 只有在我們能夠訪問狀態的 set 函式時，才能使用 startTransition。

• 傳遞給 startTransition 的函式應該是同步的。它會立即執行，並將執行期間的狀態更新標記為過渡。

• 標記為過渡的狀態更新可能會被其他更新中斷。

總結

透過提供非阻塞狀態更新，React 的 startTransition 方法幫助我們建立高響應度的 UI。透過將特定的狀態更改選擇為過渡，我們確保我們的應用程式即使在重新渲染期間也能保持響應。