复制代码
// 引入 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;