有没有办法在 ref.current 第一次可用时执行某些操作？

Question

在 React 中，我使用 @react- Three/Fiber 来处理 3D 内容。 有很多组件不支持声明式的操作方式，需要引用和命令式代码（例如来自 drei 的

CameraControls

）。

我正在尝试在启动时初始化

CameraControls

：

const cameraRef = useRef<CameraControls>(null)
const resetCamera = () => {
    if (cameraRef.current == null) return
    cameraRef.current.setLookAt(...cameraInitialPosition, ...cameraInitialTarget, true)
}
useEffect(resetCamera, [])

return (<Canvas shadows>
    <CameraControls ref={cameraRef} />
    ...
)

当然，这是行不通的，因为第一次也是唯一一次

useEffect

 被执行，

cameraRef.current

仍然是

null

。

当我尝试使用超时 hack 时，当前仍然为空：

useEffect(() => { setTimeout(resetCamera, 0) }, []) 当我将超时增加到几百毫秒时，它开始工作：

useEffect(() => { setTimeout(resetCamera, 500) }, []) 这种超时方法既糟糕又糟糕，正在寻找更好的方法......

有没有办法编写一些自定义钩子，当第一次填充当前值以执行提供的函数时，它会返回refObject

？

Answer 1

您可以使用

useState

 存储引用，使用设置状态函数作为 

回调函数 ref，而不是对象引用。

由于当 ref 可用时会调用设置状态，因此状态会发生变化，并且会触发

useEffect

：

const [cameraRef, setCameraRef) = useState<CameraControls>(null)

const resetCamera = () => {
  if (!cameraRef) return
    
  cameraRef.setLookAt(...cameraInitialPosition, ...cameraInitialTarget, true)
}

useEffect(resetCamera, [cameraRef])

return (<Canvas shadows>
  <CameraControls ref={setCameraRef} />
  ...
)