// 引入 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 组件 | 控制输入框与数据展示的交互逻辑 |
