BFE.devAI解答 - React 小测验
8. Suspense 2

这段代码中，当渲染 A 组件时，会发生什么？请解释整个过程。

当渲染 A 组件时，首先会执行函数组件 A，打印出 'A1'，接着执行 resource.get() 方法，由于 status 的值为 'pending'，会进入 if (status === 'pending') 分支，在该分支内，会创建一个 Promise 对象 fetcher，然后把它赋值给之前定义的 fetcher 变量，再将 status 的值设置为 'fetching'，随后抛出 fetcher，触发 Suspense 组件的 fallback 逻辑，渲染 <Fallback/> 组件并打印出 'fallback'。在 100ms 后，setTimeout 回调函数会被执行，将 data 的值赋为 1，status 的值设置为 'ready'，并通过 resolve 方法结束 Promise，此时 fetcher 变量的状态已经变为 fulfilled，于是 resource.get() 方法会返回 data 的值 1，同时打印出 'A2'。随后继续渲染 B 组件，打印出 'B'。最终，会渲染出 <p>1</p> 和一个空的 B 组件。