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

Question

我有一个react组件Data，其中包括几个图表组件；BarChart LineChart...等等。

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

我需要的是仅在我向下滚动并到达页面时才开始渲染每个图表。

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

Answer 1

我尝试了很多库，但找不到最适合我需求的东西，所以我为此编写了一个自定义挂钩，我希望它有帮助

import { useState, useEffect } from "react";

const OPTIONS = {
  root: null,
  rootMargin: "0px 0px 0px 0px",
  threshold: 0,
};

const useIsVisible = (elementRef) => {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    if (elementRef.current) {
      const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setIsVisible(true);
            observer.unobserve(elementRef.current);
          }
        });
      }, OPTIONS);
      observer.observe(elementRef.current);
    }
  }, [elementRef]);

  return isVisible;
};

export default useIsVisible;

然后您可以按如下方式使用该钩子：

import React, { useRef } from "react";
import useVisible from "../../hooks/useIsVisible";

function Deals() {
  const elemRef = useRef();
  const isVisible = useVisible(elemRef);
  return (
    <div ref={elemRef}>hello {isVisible && console.log("visible")}</div>
)}

Answer 2

您至少有三种选择方法：

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

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

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

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