React 18并发渲染Demo

给你写个实用又能体现 React 18 并发渲染（Concurrent Rendering）特性的Demo。

重点用到了：

• startTransition 处理低优先级更新，保证 UI 响应不卡顿

• useDeferredValue 延迟渲染，让输入更流畅

• Suspense 结合 React.lazy 做并发加载演示

这个Demo模拟一个带搜索的大列表，输入框实时更新输入状态是高优先级，列表过滤是低优先级，体现并发渲染对性能的优化。

---

import React, { useState, useTransition, useDeferredValue, Suspense, lazy } from 'react';

// 模拟大数据列表
const bigList = Array.from({ length: 20000 }, (_, i) => `Item ${i + 1}`);

// 懒加载的列表组件（模拟网络延迟加载）
const LazyList = lazy(() => new Promise(resolve =>
  setTimeout(() => resolve(import('./BigList')), 1000)
));

// BigList 组件：展示过滤后的列表
// 这里为了代码完整我写到后面，先给主App用
function BigList({ list }) {
  return (
    <ul