reactjs - 如何使用 typescript react 悬念

Question

我还没有找到任何文档或示例来解释这一点，但根据我的理解，要使用 suspense，您必须向父组件添加一个 Suspense 边界，并从子组件中删除 async/await 并延迟加载它。但是，当删除 async/await 时，它会破坏类型，因为一切都是 promise 。

例如改变await (await fetch('some-api')).json();至 fetch('some-api').json()给出错误 .json is not a function .

也无法输入值，因为 const data: MyData = fetchData()会出错，因为 fetchData返回 Promise<MyData> .

有悬念

function Parent() {
  return (
    <Suspense fallback={<Spinner />}>
      <Child />
    </Suspense>
  );
}

function Child() {
  const data: MyData[] = fetchData(); //Error: Type 'Promise<MyData[]>' is missing the following properties from type 'MyData[]': length, pop, push, concat, and 29 more
  return (
    <div>{data.map(d => <p>d.name</p>)}</data>
  );
}

悬念前

function Child() {
  const [data, setData] = useState<MyData[]>([]);
  
  useEffect(() => {
     async function loadData() {
         setData(await fetchData());
     }

     loadData();
  }, []);

  if (!data.length) return <Spinner />;

  return (
    <div>{data.map(d => <p>d.name</p>)}</data>
  );
}

Answer 1

长话短说 - fetchData的类型签名只需要 Data , 不是 Promise<Data> (因为它实际上是 fetchData(): Data with effect ReactSuspense 或 fetchData(): Data throws Promise<Data> )

详情

Suspense 不会生成异步代码块，它隐藏异步 间接。实际上，它试图将抢占式调度(运行时可以随时停止您的代码并切换到运行不同的代码位)引入协作调度环境(运行时不会停止您的代码，直到您的代码达到某个点您已明确注释为“我让出发言权”)。

它如何在手波水平上工作:

• 运行你的组件 <Child />
• Child 内部你打电话fetchData
• fetchData必须发出信号以某种方式使用react“嘿，我需要你打断Child，因为我们需要等待一些条件才能恢复Child”。
  • throw和 catch是 JavaScript 提供的唯一信号机制
  • 所以 fetchData 抛出一个 promise，React 的运行时捕获它。这意味着 Child停止执行(它被抢占)。 React 添加了一个 then听众 fetchData promise 将 Child返回待稍后“呈现”的项目队列。
  • 后来，这个 promise 实现了。 React 重新渲染的 Child . fetchData需要缓存 promise 的结果，以便下次使用相同参数调用它时，它将同步返回缓存结果。
  • 这意味着 fetchData 的类型不是(如您所料)Promise<Data>而是 JUST Data .