React 在状态改变时重新渲染整个函数

Question

我正在考虑实现一个加载屏幕来检查是否所有组件都已加载，但遇到了这种奇怪的模式。使用下面的代码，我在控制台中得到 App false 开始，在 delayHTML 函数 returns 返回数据 2000 毫秒后，我得到 LoadComponent mount event 和 App true.

但随后它又回到了悬念回退，我又得到了 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 挂起，直到达到 return 文本值的 2000 毫秒。

Answer 1

根据 React 渲染其组件的方式，您可以创建一个变量，分配 delayHTML 并使用它。

例如，

const delayFunc = delayHTML(2000);
...
<LoadComponent resource={delayFunc}/>

这应该有效。

Answer 2

你能试着把你的 useEffect 改成这样吗：

  useEffect(()=> {
    console.log ('LoadComponent mount event')
    eventBus.dispatch("FullyLoaded", {messsage: 'some message'});
  }, [])

React 在状态改变时重新渲染整个函数

React re-renders entire function when state changes

reactjs

react-suspense