ReactJS - startTransition()

StartTransition 是一个 React 函数，它允许开发人员在不中断用户界面的情况下更新应用程序的状态。换句话说，它允许我们在进行状态更新的同时，防止我们的 Web 应用程序变慢或无响应。

startTransition 函数用于将状态更新标记为"转换"。当我们需要同时进行多个状态更新时，它非常有用。React 通过将这些更新标识为转换来确保这些更新是非阻塞的，这意味着它们不会产生不必要的加载指示或让我们的应用程序感觉很慢。

语法

startTransition(scope)

参数

scope − 它是一个调用一个或多个设置函数来更新某些状态的函数。 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。我们确保选项卡切换是非阻塞的，并且不会导致 UI 变得无响应，方法是将此状态更新封闭在 startTransition 中。

步骤 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;