嵌套Suspense

第一部分：嵌套Suspense基础

1.1 什么是嵌套Suspense

嵌套Suspense是指在一个Suspense边界内部再包含其他Suspense边界的模式。这允许你为不同的异步内容提供独立的加载状态，实现更精细的加载体验控制。

基本结构：

javascript

function App() {
  return (
    <Suspense fallback={<OuterLoading />}>
      {/* 外层Suspense */}
      
      <OuterContent />
      
      <Suspense fallback={<InnerLoading />}>
        {/* 内层Suspense */}
        <InnerContent />
      </Suspense>
    </Suspense>
  );
}

1.2 执行顺序

javascript

// 嵌套Suspense的加载顺序
function NestedExample() {
  return (
    <Suspense fallback={<div>加载外层...</div>}>
      <OuterComponent />  {/* 1. 开始加载 */}
      
      <Suspense fallback={<div>加载内层...</div>}>
        <InnerComponent />  {/* 2. 外层完成后才开始 */}
      </Suspense>
    </Suspense>
  );
}

// 执行流程：
// 1. OuterComponent挂起 -> 显示"加载外层..."
// 2. OuterComponent完成 -> 渲染OuterComponent
// 3. InnerComponent挂起 -> 显示"加载内层..."
// 4. InnerComponent完成 -> 渲染InnerComponent

// 如果OuterComponent不挂起：
function NonSuspendingOuter() {
  return (
    <Suspense fallback={<div>不会显示</div>}>
      <div>立即渲染</div>  {/* 不挂起 */}
      
      <Suspense fallback={<div>加载中...</div>}>
        <AsyncComponent />  {/* 挂起 -> 显示"加载中..." */}
      </Suspense>
    </Suspense>
  );
}

1.3 基本用法

javascript

// 1. 两层嵌套
function TwoLevels() {
  return (
    <Suspense fallback={<PageSkeleton />}>
      <PageHeader />
      
      <Suspense fallback={<ContentSkeleton />}>
        <MainContent />
      </Suspense>
    </Suspense>
  );
}

// 2. 多层嵌套
function MultiLevels() {
  return (
    <Suspense fallback={<Level1Loader />}>
      <Level1Content />
      
      <Suspense fallback={<Level2Loader />}>
        <Level2Content />
        
        <Suspense fallback={<Level3Loader />}>
          <Level3Content />
        </Suspense>
      </Suspense>
    </Suspense>
  );
}

// 3. 平行嵌套
function ParallelNesting() {
  return (
    <Suspense fallback={<MainLoader />}>
      <Header />
      
      <div className="content">
        <Suspense fallback={<SidebarLoader />}>
          <Sidebar />
        </Suspense>
        
        <Suspense fallback={<MainContentLoader />}>
          <MainContent />
        </Suspense>
      </div>
    </Suspense>
  );
}

// 4. 条件嵌套
function ConditionalNesting({ showDetails }) {
  return (
    <Suspense fallback={<BasicLoader />}>
      <BasicInfo />
      
      {showDetails && (
        <Suspense fallback={<DetailsLoader />}>
          <DetailedInfo />
        </Suspense>
      )}
    </Suspense>
  );
}

1.4 为什么使用嵌套Suspense

javascript

// 问题：单一Suspense
function SingleSuspense() {
  return (
    <Suspense fallback={<FullPageLoader />}>
      <QuickContent />  {/* 100ms */}
      <SlowContent />   {/* 3000ms */}
    </Suspense>
  );
}
// 问题：快速内容被慢速内容阻塞
// 用户等待3秒才看到任何内容

// 解决：嵌套Suspense
function NestedSuspense() {
  return (
    <Suspense fallback={<QuickLoader />}>
      <QuickContent />  {/* 100ms后显示 */}
      
      <Suspense fallback={<SlowLoader />}>
        <SlowContent />  {/* 3000ms后显示 */}
      </Suspense>
    </Suspense>
  );
}
// 优势：
// 1. QuickContent 100ms后就显示
// 2. SlowContent独立加载，不阻塞QuickContent
// 3. 更好的感知性能

第二部分：实战模式

2.1 页面结构嵌套

javascript

// 典型页面结构
function ArticlePage({ articleId }) {
  return (
    <div className="article-page">
      {/* 第一层：页面框架 */}
      <Suspense fallback={<PageFrameSkeleton />}>
        <PageHeader />
        <NavigationBar />
        
        {/* 第二层：主要内容 */}
        <Suspense fallback={<ArticleSkeleton />}>
          <Article articleId={articleId} />
          
          {/* 第三层：次要内容 */}
          <Suspense fallback={<CommentsSkeleton />}>
            <Comments articleId={articleId} />
          </Suspense>
          
          <Suspense fallback={<RelatedSkeleton />}>
            <RelatedArticles articleId={articleId} />
          </Suspense>
        </Suspense>
        
        <PageFooter />
      </Suspense>
    </div>
  );
}

// 加载顺序：
// 1. PageHeader、NavigationBar（最快）
// 2. Article（主要内容）
// 3. Comments、RelatedArticles（并行，次要内容）
// 4. PageFooter（最后）

// 仪表板布局
function Dashboard() {
  return (
    <div className="dashboard">
      <Suspense fallback={<DashboardSkeleton />}>
        <DashboardHeader />
        
        <div className="dashboard-grid">
          {/* 各个widget独立加载 */}
          <Suspense fallback={<WidgetSkeleton />}>
            <SalesWidget />
          </Suspense>
          
          <Suspense fallback={<WidgetSkeleton />}>
            <UsersWidget />
          </Suspense>
          
          <Suspense fallback={<WidgetSkeleton />}>
            <RevenueWidget />
          </Suspense>
          
          <Suspense fallback={<WidgetSkeleton />}>
            <AnalyticsWidget />
          </Suspense>
        </div>
      </Suspense>
    </div>
  );
}

2.2 数据依赖嵌套

javascript

// 串行数据依赖
function UserProfile({ userId }) {
  return (
    <Suspense fallback={<ProfileSkeleton />}>
      <UserBasicInfo userId={userId} />
      
      <Suspense fallback={<DetailsSkeleton />}>
        <UserDetails userId={userId} />
      </Suspense>
    </Suspense>
  );
}

function UserBasicInfo({ userId }) {
  const user = use(fetchUser(userId));
  
  return (
    <div className="basic-info">
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

function UserDetails({ userId }) {
  // 依赖于UserBasicInfo先加载
  const details = use(fetchUserDetails(userId));
  
  return (
    <div className="details">
      <Bio text={details.bio} />
      <Stats data={details.stats} />
    </div>
  );
}

// 多级依赖
function CategoryPage({ categoryId }) {
  return (
    <Suspense fallback={<CategorySkeleton />}>
      <CategoryInfo categoryId={categoryId} />
      
      <Suspense fallback={<ProductsSkeleton />}>
        <CategoryProducts categoryId={categoryId} />
      </Suspense>
    </Suspense>
  );
}

function CategoryInfo({ categoryId }) {
  const category = use(fetchCategory(categoryId));
  
  return (
    <div>
      <h1>{category.name}</h1>
      <p>{category.description}</p>
    </div>
  );
}

function CategoryProducts({ categoryId }) {
  const category = use(fetchCategory(categoryId));  // 可能使用缓存
  const products = use(fetchProducts(category.productIds));
  
  return (
    <div className="products">
      {products.map(product => (
        <Suspense key={product.id} fallback={<ProductCardSkeleton />}>
          <ProductCard productId={product.id} />
        </Suspense>
      ))}
    </div>
  );
}

2.3 Tab切换嵌套

javascript

// Tab内容懒加载
function TabContainer() {
  const [activeTab, setActiveTab] = useState('overview');
  
  return (
    <div className="tabs">
      <TabButtons active={activeTab} onChange={setActiveTab} />
      
      <Suspense fallback={<TabSkeleton />}>
        {activeTab === 'overview' && (
          <Suspense fallback={<OverviewSkeleton />}>
            <OverviewTab />
            
            <Suspense fallback={<ChartSkeleton />}>
              <OverviewChart />
            </Suspense>
          </Suspense>
        )}
        
        {activeTab === 'details' && (
          <Suspense fallback={<DetailsSkeleton />}>
            <DetailsTab />
          </Suspense>
        )}
        
        {activeTab === 'settings' && (
          <Suspense fallback={<SettingsSkeleton />}>
            <SettingsTab />
          </Suspense>
        )}
      </Suspense>
    </div>
  );
}

// 预加载tab内容
function PreloadableTabs() {
  const [activeTab, setActiveTab] = useState('overview');
  const [preloadedTabs, setPreloadedTabs] = useState(['overview']);
  
  const handleTabHover = (tab) => {
    if (!preloadedTabs.includes(tab)) {
      setPreloadedTabs(prev => [...prev, tab]);
    }
  };
  
  return (
    <div className="tabs">
      <TabButtons 
        active={activeTab} 
        onChange={setActiveTab}
        onHover={handleTabHover}
      />
      
      <Suspense fallback={<TabLoader />}>
        {preloadedTabs.includes('overview') && activeTab === 'overview' && (
          <OverviewTab />
        )}
        
        {preloadedTabs.includes('details') && activeTab === 'details' && (
          <DetailsTab />
        )}
      </Suspense>
    </div>
  );
}

2.4 模态框嵌套

javascript

// 模态框内容懒加载
function ModalWithSuspense({ isOpen, onClose }) {
  if (!isOpen) return null;
  
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <Suspense fallback={<ModalSkeleton />}>
          <ModalHeader />
          
          <Suspense fallback={<ModalContentSkeleton />}>
            <ModalContent />
            
            <Suspense fallback={<ModalFooterSkeleton />}>
              <ModalFooter />
            </Suspense>
          </Suspense>
        </Suspense>
      </div>
    </div>
  );
}

// 嵌套模态框
function NestedModals() {
  const [primaryOpen, setPrimaryOpen] = useState(false);
  const [secondaryOpen, setSecondaryOpen] = useState(false);
  
  return (
    <div>
      <button onClick={() => setPrimaryOpen(true)}>
        打开主模态框
      </button>
      
      <Suspense fallback={<ModalLoader />}>
        {primaryOpen && (
          <PrimaryModal 
            onClose={() => setPrimaryOpen(false)}
            onOpenSecondary={() => setSecondaryOpen(true)}
          />
        )}
        
        {secondaryOpen && (
          <Suspense fallback={<ModalLoader />}>
            <SecondaryModal 
              onClose={() => setSecondaryOpen(false)}
            />
          </Suspense>
        )}
      </Suspense>
    </div>
  );
}

2.5 列表项嵌套

javascript

// 列表项独立加载
function UserList({ userIds }) {
  return (
    <Suspense fallback={<ListSkeleton />}>
      <div className="user-list">
        {userIds.map(id => (
          <Suspense key={id} fallback={<UserCardSkeleton />}>
            <UserCard userId={id} />
          </Suspense>
        ))}
      </div>
    </Suspense>
  );
}

function UserCard({ userId }) {
  const user = use(fetchUser(userId));
  
  return (
    <div className="user-card">
      <img src={user.avatar} alt={user.name} />
      <h3>{user.name}</h3>
      
      <Suspense fallback={<StatsSkeleton />}>
        <UserStats userId={userId} />
      </Suspense>
    </div>
  );
}

// 虚拟滚动 + 嵌套Suspense
function VirtualList({ items }) {
  const [visibleRange, setVisibleRange] = useState({ start: 0, end: 20 });
  
  return (
    <div className="virtual-list">
      <Suspense fallback={<ListSkeleton />}>
        {items.slice(visibleRange.start, visibleRange.end).map(item => (
          <Suspense key={item.id} fallback={<ItemSkeleton />}>
            <ListItem item={item} />
            
            <Suspense fallback={<DetailsSkeleton />}>
              <ItemDetails itemId={item.id} />
            </Suspense>
          </Suspense>
        ))}
      </Suspense>
    </div>
  );
}

第三部分：性能优化

3.1 避免过度嵌套

javascript

// ❌ 过度嵌套
function TooNested() {
  return (
    <Suspense fallback={<L1 />}>
      <Suspense fallback={<L2 />}>
        <Suspense fallback={<L3 />}>
          <Suspense fallback={<L4 />}>
            <Suspense fallback={<L5 />}>
              <Content />
            </Suspense>
          </Suspense>
        </Suspense>
      </Suspense>
    </Suspense>
  );
}
// 问题：层级太深，管理复杂

// ✅ 合理嵌套
function ReasonableNesting() {
  return (
    <Suspense fallback={<PageLoader />}>
      <PageHeader />
      
      <Suspense fallback={<ContentLoader />}>
        <MainContent />
        <SecondaryContent />
      </Suspense>
    </Suspense>
  );
}
// 2-3层嵌套最佳

3.2 并行加载优化

javascript

// 同级Suspense并行加载
function ParallelLoading() {
  return (
    <Suspense fallback={<PageLoader />}>
      <Header />
      
      <div className="parallel-content">
        {/* 这两个并行加载 */}
        <Suspense fallback={<SidebarLoader />}>
          <Sidebar />
        </Suspense>
        
        <Suspense fallback={<MainLoader />}>
          <MainContent />
        </Suspense>
      </div>
    </Suspense>
  );
}

// 对比：串行加载（效率低）
function SerialLoading() {
  return (
    <Suspense fallback={<PageLoader />}>
      <Header />
      
      <Suspense fallback={<SidebarLoader />}>
        <Sidebar />
        
        <Suspense fallback={<MainLoader />}>
          <MainContent />  {/* 等Sidebar完成 */}
        </Suspense>
      </Suspense>
    </Suspense>
  );
}

3.3 智能边界控制

javascript

// 根据数据大小决定边界
function SmartBoundary({ dataSize, children }) {
  // 小数据：单一边界
  if (dataSize < 100) {
    return (
      <Suspense fallback={<SimpleLoader />}>
        {children}
      </Suspense>
    );
  }
  
  // 大数据：嵌套边界
  return (
    <Suspense fallback={<OuterLoader />}>
      <DataHeader />
      
      <Suspense fallback={<InnerLoader />}>
        {children}
      </Suspense>
    </Suspense>
  );
}

// 根据网络状态
function NetworkAwareBoundary({ children }) {
  const connection = navigator.connection;
  const isSlow = connection?.effectiveType === '2g' || 
                 connection?.effectiveType === '3g';
  
  if (isSlow) {
    // 慢速网络：粗粒度边界
    return (
      <Suspense fallback={<FullPageLoader />}>
        {children}
      </Suspense>
    );
  }
  
  // 快速网络：细粒度边界
  return (
    <Suspense fallback={<HeaderLoader />}>
      <Header />
      <Suspense fallback={<ContentLoader />}>
        {children}
      </Suspense>
    </Suspense>
  );
}

3.4 缓存共享

javascript

// 嵌套Suspense共享缓存
const dataCache = new Map();

function fetchWithCache(key, fetcher) {
  if (dataCache.has(key)) {
    return Promise.resolve(dataCache.get(key));
  }
  
  return fetcher().then(data => {
    dataCache.set(key, data);
    return data;
  });
}

function ParentComponent({ userId }) {
  const user = use(fetchWithCache(`user-${userId}`, () => fetchUser(userId)));
  
  return (
    <div>
      <h1>{user.name}</h1>
      
      <Suspense fallback={<DetailsLoader />}>
        <ChildComponent userId={userId} />
      </Suspense>
    </div>
  );
}

function ChildComponent({ userId }) {
  // 使用缓存的user数据，不会再次请求
  const user = use(fetchWithCache(`user-${userId}`, () => fetchUser(userId)));
  
  return <div>{user.email}</div>;
}

第四部分：高级技巧

4.1 SuspenseList控制显示顺序

javascript

// 实验性API：SuspenseList
import { SuspenseList } from 'react';

// 按顺序显示
function OrderedList() {
  return (
    <SuspenseList revealOrder="forwards">
      <Suspense fallback={<Skeleton />}>
        <Item1 />
      </Suspense>
      
      <Suspense fallback={<Skeleton />}>
        <Item2 />
      </Suspense>
      
      <Suspense fallback={<Skeleton />}>
        <Item3 />
      </Suspense>
    </SuspenseList>
  );
  // Item1完成才显示Item2，Item2完成才显示Item3
}

// 一起显示
function TogetherList() {
  return (
    <SuspenseList revealOrder="together">
      <Suspense fallback={<Skeleton />}>
        <Item1 />
      </Suspense>
      
      <Suspense fallback={<Skeleton />}>
        <Item2 />
      </Suspense>
      
      <Suspense fallback={<Skeleton />}>
        <Item3 />
      </Suspense>
    </SuspenseList>
  );
  // 全部完成才一起显示
}

// tail控制fallback
function TailControl() {
  return (
    <SuspenseList revealOrder="forwards" tail="collapsed">
      <Suspense fallback={<Skeleton />}>
        <Item1 />
      </Suspense>
      
      <Suspense fallback={<Skeleton />}>
        <Item2 />
      </Suspense>
      
      <Suspense fallback={<Skeleton />}>
        <Item3 />
      </Suspense>
    </SuspenseList>
  );
  // tail="collapsed": 只显示下一个fallback
  // tail="hidden": 不显示未到的fallback
}

4.2 动态嵌套

javascript

// 根据条件添加嵌套
function DynamicNesting({ depth, children }) {
  if (depth === 0) {
    return children;
  }
  
  return (
    <Suspense fallback={<Loader level={depth} />}>
      <DynamicNesting depth={depth - 1}>
        {children}
      </DynamicNesting>
    </Suspense>
  );
}

// 使用
function App() {
  return (
    <DynamicNesting depth={3}>
      <Content />
    </DynamicNesting>
  );
  // 创建3层嵌套
}

// 递归嵌套组件
function RecursiveComponent({ data, level = 0 }) {
  if (!data.children) {
    return <LeafNode data={data} />;
  }
  
  return (
    <div style={{ marginLeft: level * 20 }}>
      <div>{data.name}</div>
      
      <Suspense fallback={<TreeSkeleton />}>
        {data.children.map(child => (
          <RecursiveComponent 
            key={child.id} 
            data={child} 
            level={level + 1}
          />
        ))}
      </Suspense>
    </div>
  );
}

4.3 错误边界嵌套

javascript

// Suspense + ErrorBoundary嵌套
function RobustNesting() {
  return (
    <ErrorBoundary fallback={<PageError />}>
      <Suspense fallback={<PageLoader />}>
        <PageHeader />
        
        <ErrorBoundary fallback={<ContentError />}>
          <Suspense fallback={<ContentLoader />}>
            <MainContent />
            
            <ErrorBoundary fallback={<CommentsError />}>
              <Suspense fallback={<CommentsLoader />}>
                <Comments />
              </Suspense>
            </ErrorBoundary>
          </Suspense>
        </ErrorBoundary>
      </Suspense>
    </ErrorBoundary>
  );
}

// 每层都有独立的错误处理和加载状态

// 统一错误处理
function UnifiedErrorHandling() {
  return (
    <ErrorBoundary 
      fallback={(error, reset) => (
        <ErrorDisplay error={error} onReset={reset} />
      )}
    >
      <Suspense fallback={<Level1Loader />}>
        <Level1Content />
        
        <Suspense fallback={<Level2Loader />}>
          <Level2Content />
          
          <Suspense fallback={<Level3Loader />}>
            <Level3Content />
          </Suspense>
        </Suspense>
      </Suspense>
    </ErrorBoundary>
  );
}
// 任何层级的错误都被顶层ErrorBoundary捕获

4.4 性能监控

javascript

// 监控嵌套Suspense性能
function MonitoredNesting({ level, children }) {
  const [metrics, setMetrics] = useState([]);
  const startTimeRef = useRef(null);
  
  const fallback = (
    <div>
      <Loader level={level} />
      <SuspenseMonitor
        level={level}
        onStart={() => {
          startTimeRef.current = performance.now();
        }}
      />
    </div>
  );
  
  useEffect(() => {
    if (startTimeRef.current) {
      const duration = performance.now() - startTimeRef.current;
      
      setMetrics(prev => [...prev, {
        level,
        duration,
        timestamp: Date.now()
      }]);
      
      startTimeRef.current = null;
    }
  });
  
  return (
    <Suspense fallback={fallback}>
      {children}
      <MetricsDisplay metrics={metrics} />
    </Suspense>
  );
}

// 追踪嵌套深度
function DepthTracker() {
  const [depths, setDepths] = useState([]);
  
  const trackDepth = (level) => {
    setDepths(prev => [...prev, level]);
  };
  
  return (
    <DepthContext.Provider value={trackDepth}>
      <NestedComponents />
      <DepthStats depths={depths} />
    </DepthContext.Provider>
  );
}

注意事项

1. 避免闪烁

javascript

// ❌ 可能闪烁
function MayFlash() {
  return (
    <Suspense fallback={<Loader />}>
      <QuickComponent />  {/* 50ms */}
    </Suspense>
  );
}
// Loader可能闪现

// ✅ 延迟显示fallback
function DelayedFallback() {
  const [show, setShow] = useState(false);
  
  useEffect(() => {
    const timer = setTimeout(() => setShow(true), 200);
    return () => clearTimeout(timer);
  }, []);
  
  if (!show) return null;
  return <Loader />;
}

function NoFlash() {
  return (
    <Suspense fallback={<DelayedFallback />}>
      <QuickComponent />
    </Suspense>
  );
}

2. 合理粒度

javascript

// 粒度选择指南
function GranularityGuide() {
  // 粗粒度：整页
  return (
    <Suspense fallback={<FullPageLoader />}>
      <EntirePage />
    </Suspense>
  );
  // 适用：小应用、简单页面
  
  // 中粒度：区域
  return (
    <div>
      <Suspense fallback={<HeaderLoader />}>
        <Header />
      </Suspense>
      
      <Suspense fallback={<ContentLoader />}>
        <Content />
      </Suspense>
    </div>
  );
  // 适用：大多数应用
  
  // 细粒度：组件
  return (
    <Suspense fallback={<ComponentLoader />}>
      <SmallComponent />
    </Suspense>
  );
  // 适用：关键组件、独立widget
}

3. SSR注意事项

javascript

// SSR中的嵌套Suspense
function SSRNesting() {
  return (
    <Suspense fallback={<ServerSkeleton />}>
      <ServerComponent />
      
      <Suspense fallback={<ClientSkeleton />}>
        <ClientComponent />
      </Suspense>
    </Suspense>
  );
}

// React 18+ SSR流式渲染支持嵌套Suspense
// 服务器：
// 1. 渲染外层Suspense fallback
// 2. ServerComponent ready -> 发送HTML
// 3. ClientComponent ready -> 发送HTML

常见问题

Q1: 嵌套Suspense会影响性能吗？

A: 合理使用不会，反而能优化加载体验。

Q2: 最多可以嵌套多少层？

A: 无限制，但建议2-3层。

Q3: 内层Suspense会阻塞外层吗？

A: 不会，外层完成就显示，内层独立加载。

Q4: 如何决定嵌套深度？

A: 根据内容重要性和加载速度。

Q5: 同级Suspense会并行加载吗？

A: 会，React会并行处理。

Q6: 嵌套Suspense和loading状态哪个好？

A: Suspense更声明式，适合组件化应用。

Q7: 如何调试嵌套Suspense？

A: 使用React DevTools的Profiler和Suspense追踪。

Q8: 可以动态改变嵌套结构吗？

A: 可以，通过条件渲染控制。

Q9: ErrorBoundary应该放在哪一层？

A: 根据错误处理粒度，可以每层都有。

Q10: 嵌套Suspense适合所有场景吗？

A: 不是，简单页面用单层即可。

总结

核心要点

1. 嵌套Suspense优势
   ✅ 独立加载状态
   ✅ 渐进式显示
   ✅ 更好的用户体验
   ✅ 灵活的粒度控制

2. 最佳实践
   ✅ 2-3层嵌套最佳
   ✅ 按重要性分层
   ✅ 同级并行加载
   ✅ 避免过度嵌套

3. 常见模式
   ✅ 页面结构嵌套
   ✅ 数据依赖嵌套
   ✅ Tab切换嵌套
   ✅ 列表项嵌套

设计原则

1. 用户体验优先
   ✅ 快速显示关键内容
   ✅ 渐进式加载次要内容
   ✅ 避免闪烁
   ✅ 提供视觉反馈

2. 性能考虑
   ✅ 合理的边界粒度
   ✅ 并行vs串行加载
   ✅ 缓存共享
   ✅ 预加载优化

3. 代码组织
   ✅ 清晰的层级结构
   ✅ 可维护性
   ✅ 可测试性
   ✅ 错误处理

嵌套Suspense是构建现代React应用的重要模式，掌握它能创造出色的加载体验。

嵌套Suspense ​

第一部分：嵌套Suspense基础 ​

1.1 什么是嵌套Suspense ​

1.2 执行顺序 ​

1.3 基本用法 ​

1.4 为什么使用嵌套Suspense ​

第二部分：实战模式 ​

2.1 页面结构嵌套 ​

2.2 数据依赖嵌套 ​

2.3 Tab切换嵌套 ​

2.4 模态框嵌套 ​

2.5 列表项嵌套 ​

第三部分：性能优化 ​

3.1 避免过度嵌套 ​

3.2 并行加载优化 ​

3.3 智能边界控制 ​

3.4 缓存共享 ​

第四部分：高级技巧 ​

4.1 SuspenseList控制显示顺序 ​

4.2 动态嵌套 ​

4.3 错误边界嵌套 ​

4.4 性能监控 ​

注意事项 ​

1. 避免闪烁 ​

2. 合理粒度 ​

3. SSR注意事项 ​

常见问题 ​

Q1: 嵌套Suspense会影响性能吗？ ​

Q2: 最多可以嵌套多少层？ ​

Q3: 内层Suspense会阻塞外层吗？ ​

Q4: 如何决定嵌套深度？ ​

Q5: 同级Suspense会并行加载吗？ ​

Q6: 嵌套Suspense和loading状态哪个好？ ​

Q7: 如何调试嵌套Suspense？ ​

Q8: 可以动态改变嵌套结构吗？ ​

Q9: ErrorBoundary应该放在哪一层？ ​

Q10: 嵌套Suspense适合所有场景吗？ ​

总结 ​

核心要点 ​

设计原则 ​

嵌套Suspense

第一部分：嵌套Suspense基础

1.1 什么是嵌套Suspense

1.2 执行顺序

1.3 基本用法

1.4 为什么使用嵌套Suspense

第二部分：实战模式

2.1 页面结构嵌套

2.2 数据依赖嵌套

2.3 Tab切换嵌套

2.4 模态框嵌套

2.5 列表项嵌套

第三部分：性能优化

3.1 避免过度嵌套

3.2 并行加载优化

3.3 智能边界控制

3.4 缓存共享

第四部分：高级技巧

4.1 SuspenseList控制显示顺序

4.2 动态嵌套

4.3 错误边界嵌套

4.4 性能监控

注意事项

1. 避免闪烁

2. 合理粒度

3. SSR注意事项

常见问题

Q1: 嵌套Suspense会影响性能吗？

Q2: 最多可以嵌套多少层？

Q3: 内层Suspense会阻塞外层吗？

Q4: 如何决定嵌套深度？

Q5: 同级Suspense会并行加载吗？

Q6: 嵌套Suspense和loading状态哪个好？

Q7: 如何调试嵌套Suspense？

Q8: 可以动态改变嵌套结构吗？

Q9: ErrorBoundary应该放在哪一层？

Q10: 嵌套Suspense适合所有场景吗？

总结

核心要点

设计原则