javascript - 在 react-three-fiber 中通过 useFrame 使用外部数据的最佳方式

Question

我有一个名为Sticky包装我的组件的react-three-fiber组件。该组件通过回调为我提供了一些状态更新，因此整个代码如下所示：

const Box = props => {
  
  useFrame(() => {
    // I need the Sticky state update here!
  });

  return (
    <mesh {...props}>
      <boxBufferGeometry attach="geometry" args={[1, 1, 1]} />
      <meshStandardMaterial
        attach="material"
        color={"orange"}
      />
    </mesh>
  );
};

const Main = () => {
  const onChange = state => {
    console.log('NEW STATE', state);
  };

  return (
    <Sticky onChange={onChange}
        <Canvas>
          <Box position={[-1.2, 0, 0]} />
        </Canvas>
    </Sticky>
  );
};

如您所见，我需要来自钩子Sticky onChange内回调的数据。react-three-fiber useFrame我了解一切是如何工作的，并且我不想将其传递给组件，因为这将重新渲染 Three.js 草图。但是如果我不能依赖 props，你如何处理react-three-fiber组件中的外部数据？

任何帮助表示赞赏。