Question

我有一个组件，它有一个超级复杂的图形子组件，需要 5 秒以上的时间来渲染。不是因为数据获取或包大小，渲染确实需要很长时间，并且优化它在某种程度上是不可能完成的任务。

<>
  <Other />
  <SlowOne />
</>

“SlowOne”慢是可以接受的，我们要做的是：

在渲染此部分时，其他部分应该是可交互的。
是否有 React API 来指示“挂载”、“挂载”、“渲染”、“渲染完成”状态，以便我们可以在“SlowOne”挂载之前显示占位符。

有什么实现它们的想法吗？

Answer 1

您可能正在寻找 React.Lazy 函数和 Suspense 组件。

import React, { Suspense } from 'react';

const SlowOne = React.lazy(() => import('./SlowOne'));

function MyComponent() {
  return (
    <div>
      <Other />
      <Suspense fallback={<div>Loading...</div>}>
        <SlowOne />
      </Suspense>
    </div>
  );
}

“加载”文本或容器将在加载时代替组件呈现。您还可以传入另一个组件作为后备。

或者进行条件渲染。

render() {
  const flag = false;
  return (
    <div>
      { flag && <SlowOne />} // only render if flag is true
    </div>
  );
}

对慢速儿童反应延迟渲染

1 个答案: