javascript - ReactJS 如何仅在向下滚动并到达页面时才呈现组件？

Question

我有一个 React 组件 Data，其中包含几个图表组件； 条形图 折线图 ...等等

当Data组件开始渲染时，需要一段时间才能从API接收到每个图表所需的数据，然后开始响应并渲染所有图表组件。

我需要的是，当我向下滚动并到达页面上时仅开始呈现每个图表。

有什么方法可以帮助我实现这一目标吗？

Answer 1

您至少有三种选择:

1. 跟踪组件是否在视口(viewport)中(对用户可见)。然后渲染它。您可以使用此 HOC https://github.com/roderickhsiao/react-in-viewport

2. 使用 https://react-fns.netlify.com/docs/en/api.html#scroll 明确跟踪“y”滚动位置

3. 使用 Intersection Observer API 编写您自己的 HOC https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

要渲染组件，您可能需要另一个 HOC，它将根据接收到的 props 返回 Chart 组件或“null”。