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 组件 控制输入框与数据展示的交互逻辑
相关推荐
唐青枫5 小时前
C#.NET dapper 详解
c#·.net
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴6 小时前
Mix
前端·webgl
代码续发6 小时前
前端组件梳理
前端
试图让你心动7 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
死也不注释7 小时前
【鸡零狗碎记录】
unity·c#
陈不知代码7 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记7 小时前
sass中@mixin与 @include
前端·sass
Maybe_ch7 小时前
.NET-键控服务依赖注入
开发语言·c#·.net
陈琦鹏7 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket