我正在考虑实现一个加载屏幕来检查是否加载了所有组件,但遇到了这种奇怪的模式。使用下面的代码,我进入App false
控制台启动,在 delayHTML 函数返回数据 2000 毫秒后,我得到LoadComponent mount event
和App true
.
但随后它又回到了 suspense 回退,我又得到了 2000 毫秒,其中LoadComponent mount event
和App true
消息再次出现,看起来像是第二次渲染。我怎样才能避免这种情况?
function App() {
const [fullLoadState, setfullLoadState] = useState(false);
console.log("App " + fullLoadState)
eventBus.on("FullyLoaded", (data) => setfullLoadState(true));
return (
<div>
<Suspense fallback='Fallback'>
<LoadComponent resource={delayHTML(2000)}/>
</Suspense>
<p>{fullLoadState ? null : "Site not fully loaded" }</p>
</div>
);
}
function LoadComponent({resource}){
useEffect(()=> {
console.log ('LoadComponent mount event')
eventBus.dispatch("FullyLoaded", {messsage: 'some message'});
})
const html = resource.read();
return html;
}
export default App;
EventBus 只是 EventListener。delayHTML 暂停,直到达到 2000 毫秒以返回文本值。