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 组件 控制输入框与数据展示的交互逻辑
相关推荐
番茄小能手6 分钟前
【全网唯一】C# 纯本地离线文字识别Windows版dll插件
开发语言·c#
葬歌倾城1 小时前
waferMap图像渲染
c#·wpf
孤水寒月1 小时前
给自己网站增加一个免费的AI助手,纯HTML
前端·人工智能·html
CoderLiu1 小时前
用这个MCP,只给大模型一个figma链接就能直接导出图片,还能自动压缩上传?
前端·llm·mcp
伍哥的传说1 小时前
鸿蒙系统(HarmonyOS)应用开发之实现电子签名效果
开发语言·前端·华为·harmonyos·鸿蒙·鸿蒙系统
甄天2 小时前
WPF路由事件:冒泡、隧道与直接全解析
c#·wpf·visual studio
海的诗篇_2 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
uncleTom6662 小时前
前端地图可视化的新宠儿:Cesium 地图封装实践
前端
lemonzoey2 小时前
无缝集成 gemini-cli 的 vscode 插件:shenma
前端·人工智能
老家的回忆2 小时前
jsPDF和html2canvas生成pdf,组件用的elementplus,亲测30多页,20s实现
前端·vue.js·pdf·html2canvas·jspdf