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。通过将特定的状态更改选择为过渡，我们确保我们的应用程序即使在重新渲染期间也能保持响应。