使用React Suspense实现流式加载

思路

1. 使用 React Suspense 结合自定义的异步数据读取器（resource），实现边请求边渲染。

2. 通过 Promise + 读取状态管理，实现流式数据加载，数据分批逐渐展示。

3. 组件挂载时启动数据流，Suspense 展示 fallback，数据准备好后逐步展示。

代码示例

import React, { Suspense, useState, useEffect } from 'react';

// 模拟流式数据加载器，分批返回数据
function createStreamResource(fetchChunks) {
  let status = 'pending';
  let result;
  let suspender;

  // 读取器暴露给组件
  const read = () => {
    if (status === 'pending') {
      throw suspender; // 抛出 Promise，触发 Suspense fallback
    } else if (status === 'error') {
      throw result;
    } else if (status ==