ReactJS - useTransition Hook

在 React 18 中，有一个名为 useTransition hook 的新Hooks(钩子)可用。因此，我们将研究 useTransition hook 的基础知识以及如何应用它来提高 React 应用程序的性能。

性能是创建交互式用户界面时需要考虑的重要因素。借助 useTransition hook，可以提高 React 应用程序的性能。通过将与动画相关的状态更改与组件中的其他状态更改分开，此Hooks(钩子)让我们可以在不中断用户界面的情况下更新状态。

我们可以决定哪些状态更改是紧急或关键的，哪些状态更改不使用 useTransition hook。

在 React 中，所有状态更新都被视为必不可少。它可以进行一些快速的 UI 更改，例如从下拉菜单中选择一个值。

语法

const [isPending, startTransition] = useTransition()

参数

useTransition Hooks(钩子)不接受任何参数。

返回值

Hooks(钩子) 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);
      });
   }
}

我们可以以不同的方式使用给定的Hooks(钩子)"useTransition"，例如在转换期间更改主要部分。因此，我们将借助示例详细讨论这一点。

示例

示例 − 任务列表应用程序

在此应用程序中，我们将有一个包含两个屏幕的任务列表:一个用于查看任务，另一个用于查看已完成的任务。此外，我们还将有按钮，允许我们在这些屏幕之间切换。因此，使用 useTransition Hooks(钩子)的此应用程序的代码如下所示 −

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 Hooks(钩子)来更改父组件的状态。例如，当我们单击此 LightSwitch 组件中的选项卡时，它会修改父组件的状态。此更新被视为转换，使我们能够轻松地在选项卡之间导航，而不会出现用户交互延迟。

export default function LightSwitch({ isOn, toggleSwitch }) {
   const [isPending, startTransition] = useTransition();
   return (
      <button onClick={() => {
         startTransition(() => {
            toggleSwitch(); // 这将更新父级的状态。
         });
      }}>
      {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 的 Container 函数的 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 会将它们组合在一起。

reactjs_reference_api.html