ReactJS - useTransition 鉤子

---

---

在 React 18 中，可以使用名為 useTransition 的新鉤子。因此，我們將研究 useTransition 鉤子的基礎知識以及如何將其應用於提高 React 應用程式的效能。

效能是在建立互動式使用者介面時需要考慮的重要因素。藉助 useTransition 鉤子是一種提高 React 應用程式效能的技術。透過將與動畫相關的狀態更改與元件中的其他狀態更改分開，此鉤子允許我們更新狀態而不會中斷使用者介面。

我們可以使用 useTransition 鉤子來確定哪些狀態更改是緊急或關鍵的，哪些不是。

在 React 中，所有狀態更新都被認為是必要的。它能夠進行一些快速的 UI 更改，例如從下拉選單中選擇一個值。

語法

const [isPending, startTransition] = useTransition()

引數

useTransition 鉤子不接受任何引數。

返回值

useTransition 鉤子返回一個恰好包含兩個元素的陣列。

• isPending - isPending 標誌顯示當前是否存在掛起的轉換。

• startTransition - 使用 startTransition 函式可以將狀態更新定義為轉換。

如何使用它？

在 React 中，我們可以使用 useTransition 返回的 startTransition 函式將狀態更新定義為轉換。

function Container() {
   const [isPending, startTransition] = useTransition();
   const [screen, setScreen] = useState('home');
   function selectScreen(nextScreen) {
      startTransition(() => {
         setScreen(nextScreen);
      });
   }
}

我們可以以不同的方式使用給定的鉤子“useTransition”，例如在轉換期間更改主要部分。因此，我們將藉助示例詳細討論這一點。

示例

示例 - 任務列表應用

在這個應用中，我們將擁有一個任務列表，其中包含兩個螢幕：一個用於檢視任務，另一個螢幕用於檢視已完成的任務。我們還將擁有按鈕，允許我們在這兩個螢幕之間切換。因此，使用 useTransition 鉤子的此應用程式的程式碼如下所示：

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

function Container() {
   const [isPending, startTransition] = useTransition();
   const [screen, setScreen] = useState('tasks');   
   function selectScreen(nextScreen) {
      startTransition(() => {
         setScreen(nextScreen);
      });
   }
   
   return (
      <div>
         <h1>My Task List App</h1>
         {screen === 'tasks' && (
            <div>
               <p>Task 1: Complete React App</p>
               <p>Task 2: Learn Hooks</p>
            </div>
         )}
         {screen === 'completed' && (
            <div>
               <p>Completed Tasks:</p>
               <p>Task 1: Complete React App</p>
            </div>
         )}
         <button onClick={() => selectScreen('tasks')}>View Tasks</button>
         <button onClick={() => selectScreen('completed')}>View Completed</button>
      </div>
   );
}

export default Container;

輸出

示例 - 在轉換期間更改主要部分

我們可以使用 useTransition 鉤子來更改父元件的狀態。例如，當我們在此 LightSwitch 元件中點選一個選項卡時，它會修改父元件的狀態。此更新被視為轉換，使我們能夠輕鬆地在選項卡之間導航，而不會延遲使用者互動。

export default function LightSwitch({ isOn, toggleSwitch }) {
   const [isPending, startTransition] = useTransition();
   return (
      <button onClick={() => {
         startTransition(() => {
            toggleSwitch(); // This updates the parent's state.
         });
      }}>
      {isOn ? "Turn Off" : "Turn On"}
      </button>
   );
}

當我們點選按鈕時，LightSwitch 元件會更改父元件中電燈開關的狀態。此狀態更改被視為轉換，使我們能夠開啟和關閉電燈，而不會出現任何延遲。

因此，我們將建立一個小型應用程式來展示 useTransition 鉤子的用法，以便更好地理解。

應用

讓我們構建一個小型應用程式，它使用選項卡在不同的部分之間切換。

此應用程式將分為三個選項卡：“主頁”、“產品”和“聯絡”。當我們點選選項卡時，會顯示相關內容。透過使用 useTransition 鉤子，我們將提供流暢的選項卡轉換，它將模擬一個基本的網站佈局，我們可以在其中訪問有關主頁、專案和聯絡資訊的資訊。

TabButton.js

import { useTransition } from 'react';

export default function TabButton({ children, isActive, onClick }) {
   const [isPending, startTransition] = useTransition();
   if (isActive) {
      return <b>{children}</b>
   }
   return (
      <button onClick={() => {
         startTransition(() => {
            onClick();
         });
      }}>
      {children}
      </button>
   );
}

Home.js

export default function Home() {
   return (
      <div>
         <h2>Welcome to our Home page!</h2>
         <p>This is the main page of our website.</p>
      </div>
   );
}

Products.js

export default function Products() {
   return (
      <div>
         <h2>Our Products</h2>
         <ul>
            <li>Product 1</li>
            <li>Product 2</li>
            <li>Product 3</li>
         </ul>
      </div>
   );
}

Contact.js

export default function Contact() {
   return (
      <div>
         <h2>Contact Us</h2>
         <p>You can reach us via email or phone:</p>
         <ul>
            <li>Email: contact@mywebsite.com</li>
            <li>Phone: 12345 - 67890</li>
         </ul>
      </div>
   );
}

App.js

import { useState } from 'react';
import TabButton from './TabButton';
import Home from './Home';
import Products from './Products';
import Contact from './Contact';

export default function App() {
   const [tab, setTab] = useState('home');
   return (
      <>
         <TabButton
            isActive={tab === 'home'}
            onClick={() => setTab('home')}
         >
            Home
         </TabButton>
         <TabButton
            isActive={tab === 'products'}
            onClick={() => setTab('products')}
         >
            Products
         </TabButton>
         <TabButton
            isActive={tab === 'contact'}
            onClick={() => setTab('contact')}
         >
            Contact
         </TabButton>
         <hr />
         {tab === 'home' && <Home />}
         {tab === 'products' && <Products />}
         {tab === 'contact' && <Contact />}
      </>
   );
}

輸出

示例 - 計數器容器應用程式（增量/減量）

這是另一個使用包含 useTransition 和 useState 函式的 React 應用程式的簡單示例。此應用程式是一個基本的計數器應用程式。有一個從 0 開始的計數器。我們可以點選“增量”按鈕來增加計數，點選“減量”按鈕來減少計數。計數顯示在螢幕上，並且轉換用於在更新計數時提供流暢的使用者體驗。此應用程式的程式碼如下所示：

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

function Container() {
   const [isPending, startTransition] = useTransition();
   const [count, setCount] = useState(0);
   
   function increment() {
      startTransition(() => {
         setCount(count + 1);
      });
   }
   
   function decrement() {
      startTransition(() => {
         setCount(count - 1);
      });
   }
   
   return (
      <div>
         <h1>Simple Counter App</h1>
         <p>Count: {count}</p>
         <button onClick={increment}>Increment</button>
         <button onClick={decrement}>Decrement</button>
      </div>
   );
}

export default Container;

輸出

限制

• UseTransition 只能在我們程式碼的特定部分（例如元件或自定義方法）中使用。我們應該使用“startTransition”而不是“startTransition”來從其他地方開始轉換。

• 只有在我們有權訪問修改狀態的函式時，才能將其放入轉換中。如果我們想響應變數或自定義函式之類的事件來啟動轉換，我們應該使用“useDeferredValue”。

• 我們提供給“startTransition”的函式必須快速且簡單。React 將立即執行它，並且在此期間發生的任何狀態更改都將被視為轉換。如果我們稍後嘗試進行更多狀態更改，例如使用超時，則它們將不會被視為轉換。

• 轉換可能會被其他狀態更改中斷。例如，如果我們在轉換期間更新圖表，然後開始在輸入欄位中鍵入內容，React 將停止圖表更新並首先處理輸入。

• 轉換不能用於控制文字輸入欄位。

• 如果同時發生多個轉換，React 會將它們組合在一起。