React组件延迟页面加载

Question

我有2个子组件在我的父组件，CompA和CompB。第二个组件执行大量数据处理(为此还调用许多其他组件)，这会延迟整个页面加载时间。这导致我的Spinner在一段时间后卡住。有没有其他的方法来检查CompB是否准备好被渲染，然后渲染它，而页面已经加载了CompA ?

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

感谢您的帮助

Answer 1

如果您在JavaScript的主线程上进行大量计算，您总是会遇到响应性不足的问题。这可能会导致您正在经历的渲染延迟，或者例如，按钮和其他用户输入的响应性低于最佳状态。

解决这个问题的方法是将计算移出组件并移出主线程以释放其用于渲染工作。您可以在初始状态下呈现CompB为空白/挂起/加载状态，然后在您想要显示的数据准备好后更新它。

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

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