import React, { useState } from 'react'
let count = 0
export default function Home(props) {
function fn(){
let status = 'pending'
const promise = new Promise((res)=>{
count++
setTimeout(()=>{
status = 'success'
res(1)
},1000)
})
console.log(promise)
if(count == 1){
throw promise
}
}
fn()
return (
<div>
1
</div>
)
}
当Suspense包含子组件时,子组件throw一个promise时,如果promise是pending状态,页面会渲染fallback组件,如果该promise状态从pending转换成fulfilled或者rejected,会重新渲染子组件。