对慢孩子做出反应延迟渲染答案

【问题标题】：React lazy rendering on slow children对慢孩子做出反应延迟渲染
【发布时间】：2021-05-20 12:04:41
【问题描述】：

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

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

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

其他部分在渲染时应该是可交互的。
是否有 React API 来指示“mounting”、“mounted”、“rendering”、“render complete”状态，以便我们可以在“SlowOne”安装之前显示一个占位符。

有实施它们的想法吗？

【问题讨论】：

标签： reactjs

【解决方案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>
  );
}

【讨论】：

感谢您的回答。它行不通。这种方法只会延迟组件的加载，而不是渲染。 Slow的renderi阶段和commit阶段都需要很长时间，整个页面的交互都会被阻塞。
您可能需要将标志或条件声明为状态或组件道具，并检查该标志或条件的值是否为真。如果未设置或未设置为 true，则不渲染组件。有关条件渲染的更多信息在这里。 reactjs.org/docs/conditional-rendering.html 我在上面添加了一个示例。
然后一旦标志为真，慢组件开始渲染，整个页面不可交互。