React中startTransition的使用

复制代码

// 引入 React 的 Hook API：useState 管理状态、useTransition 处理非紧急更新、useMemo 缓存计算结果
import { useState, useTransition, useMemo } from 'react';

/**
 * List 组件：
 * 根据输入的 query 动态渲染一个包含 10000 条数据的列表
 */
function List({ query }) {
  // 固定字符串，用于展示匹配内容
  const word = 'hello word';

  // 使用 useMemo 缓存生成的列表项，避免重复创建大量 DOM 节点，提升性能
  const items = useMemo(() => {
    const arr = [];

    if (query.trim() === '') {
      // 如果 query 为空，则显示默认的 10000 个 "hello word"
      for (let i = 0; i < 10000; i++) {
        arr.push(<li key={i}>hello word</li>);
      }
    } else if (word.includes(query)) {
      // 如果 query 包含在 word 中，则拆分并高亮显示匹配内容
      const splitArr = word.split(query);
      for (let i = 0; i < 10000; i++) {
        arr.push(
          <li key={i}>
            {/* 高亮显示 query 内容 */}
            {splitArr[0]}
            <span style={{ color: 'red' }}>{query}</span>
            {splitArr[1]}
          </li>
        );
      }
    }

    return arr;
  }, [query]); // 只有当 query 改变时才重新计算

  // 渲染无序列表
  return <ul>{items}</ul>;
}

/**
 * App 主组件：
 * 控制输入框与列表之间的交互逻辑
 */
function App() {
  // search：控制输入框内容（立即更新）
  const [search, setSearch] = useState('');

  // query：控制 List 显示的内容（可延迟更新）
  const [query, setQuery] = useState('');

  // isPending：表示当前是否处于过渡状态（即非紧急更新中）
  const [isPending, startTransition] = useTransition();

  /**
   * 输入框变化事件处理函数
   * - 立即更新 search（保持 UI 响应）
   * - 使用 startTransition 延迟更新 query（优化性能）
   */
  const handleChange = (e) => {
    const value = e.target.value;

    setSearch(value); // 紧急更新，确保输入框即时响应

    startTransition(() => {
      setQuery(value); // 非紧急更新，React 会优先处理用户可见的变化
    });
  };

  return (
    <>
      hello App
      {/* 输入框，绑定 value 和 onChange 事件 */}
      <input type="text" value={search} onChange={handleChange} />

      {/* 过渡期间显示加载提示 */}
      {isPending ? <p>加载中...</p> : null}

      {/* 将 query 传递给 List 组件进行内容渲染 */}
      <List query={query} />
    </>
  );
}

// 导出 App 组件供其他模块使用
export default App;

📌 注释说明总结：

模块	作用
`useState`	管理组件内部状态
`useTransition`	实现非紧急状态更新，提升用户体验流畅度
`useMemo`	缓存复杂计算结果，避免重复渲染造成的性能浪费
`List` 组件	展示大量数据，并支持关键词高亮
`App` 组件	控制输入框与数据展示的交互逻辑