引言

useTransition 是 React 中用于优化渲染性能的 Hook。它允许你将某些状态更新标记为“过渡”（transition），从而在高优先级更新（如用户输入）发生时，低优先级更新（如数据加载或复杂计算）可以被延迟，以确保高优先级更新能够更快地响应。本文将详细介绍 useTransition 的语法、参数、返回值以及具体用法。

语法

useTransition 的基本语法如下：

const [isPending, startTransition] = useTransition();

参数

useTransition 不接受任何参数。

返回值

useTransition 返回一个包含两个元素的数组：

1. isPending: 一个布尔值，表示当前是否有过渡状态正在进行中。

   • true: 表示过渡状态正在进行中。
   • false: 表示过渡状态已完成。

2. startTransition: 一个函数，用于将状态更新标记为“过渡”。

   • 签名: startTransition(callback: () => void): void
   • 参数: callback 是一个函数，包含需要标记为“过渡”的状态更新逻辑。
   • 返回值: 无。

基本用法

以下是一个简单的示例，展示如何使用 useTransition 来优化搜索功能的渲染性能。

// src/components/useTransition/LargeList.tsx
import React from 'react';interface LargeListProps {items: string[];
}export default function LargeList({ items }: LargeListProps) {return (<ul>{items.map((item, index) => (<li key={index}>{item}</li>))}</ul>);
}

// src/components/useTransition/SearchableList.tsx
import { useState, useTransition } from 'react';
import LargeList from './LargeList';const getItems = () => {console.log('getItems');return Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`);
};export default function SearchableList() {const [items, setItems] = useState(getItems);const [searchValue, setSearchValue] = useState('');const [isPending, startTransition] = useTransition();const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {const value = e.target.value;// 将用户输入标记为“过渡”状态startTransition(() => {setSearchValue(value);});};const filteredItems = items.filter(item =>item.toLowerCase().includes(searchValue.toLowerCase()));return (<div><inputtype="text"placeholder="搜索..."value={searchValue}onChange={handleChange}/>{isPending ? <p>加载中...</p> : <LargeList items={filteredItems} />}</div>);
}

// src/App.tsx
import SearchableList from "./components/useTransition/SearchableList";function App() {return <SearchableList />;
}export default App;

总结

• 适用场景:
  • 需要处理大量数据的列表、搜索功能等。
  • 需要优化复杂计算或数据加载的场景。

希望这篇文章能帮助你更好地理解useTransition的使用方法，并为你的 React 项目带来更多的灵感和便利。如果你有任何问题或建议，欢迎留言交流！