reactjs - 仅当元素位于视口(viewport)上时才调用 UseFrame

Question

我正在使用react-三纤维中的react hook“UseFrame”。然而，这个函数在每一帧都会被调用。有没有办法仅当 react 元素位于视口(viewport)内时才调用此回调函数？我应该使用不同的钩子(Hook)吗？我不希望为那些未在屏幕上显示的 react 元素在每一帧调用这个“UseFrame”钩子(Hook)。

Answer 1

您可以将 useFrame Hook 包装在它自己的组件中，然后仅当 Canvas 位于视口(viewport)内时才渲染该组件，如下所示:

import { Canvas, useFrame } from "@react-three/fiber";
import { useInView } from "react-intersection-observer";

function DisableRender() {
  useFrame(() => null, 1000);
}

function App() {
  const { ref, inView } = useInView();
  return (
    <div ref={ref} className="canvasContainer">
      <Canvas>{!inView && <DisableRender />}</Canvas>
    </div>
  );
}