React组件延迟页面加载

问题描述：

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

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

感谢所有帮助

听起来像你的组件B正在做很多一些同步的东西？可能会显示更多的代码.. – Hardy

确实，它将数据传递给多个组件，它使用D3呈现SVG。同时，绘制轴的许多计算也都在减速。特别是当传递多个数组超过10000个项目时。不能添加额外代码的道歉原因有多个组件，但是如果有任何其他想法延迟CompB加载到父组件会非常有帮助。 –

尝试在'setTimeout'中包装很重的部分。 – Hardy

答

你总是会遇到一些缺乏响应如果你在JavaScript中主线程重计算。这可能导致您正在经历的延迟渲染，或者例如并不是按钮和其他用户输入的最佳响应。

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

要移动计算出的主线程，你有多种选择，其中两个是

using Web Workers在客户端上的背景进行计算，并
在异步执行计算后端并通过Web服务传递输入和输出。

React组件延迟页面加载

相关推荐