React组件会延迟页面加载

Question

我的父组件CompA和CompB中有2个子组件。第二个组件进行了大量的数据处理（也调用了许多其他组件），这延迟了整个页面的加载时间。这导致我的Spinner在一段时间后陷入困境。有没有其他方法可以检查CompB是否已准备好呈现，然后呈现它，而页面已经加载了CompA？

return(
    <div>
      <CompA
        info = {info}
        />
        <CompB
        data = {data}
        />
   </div>

感谢您的帮助

Answer 1

如果您在JavaScript中对主线程进行大量计算，您将始终遇到一些缺乏响应的问题。这可能会导致您遇到延迟呈现，或者在按钮和其他用户输入的响应性不佳时。

解决方法是将计算移出组件并从主线程中移出以释放它以进行渲染工作。 您最初可以将CompB呈现为空白/挂起/加载状态，并在您要显示的数据准备好后立即更新。

要将计算移出主线程，您有多个选项，其中两个是

• using Web Workers在客户端后台执行计算，
• 在后端异步执行计算，并通过Web服务传递输入和输出。