react中的画布不会重新渲染每个道具更新

Question

我一直在尝试在React.js中实现受Apple's landing page启发的滚动视频视差效果。我已经非常接近这些参考资料：

https://codepen.io/ollieRogers/pen/lfeLc/

http://www.petecorey.com/blog/2019/08/19/animating-a-canvas-with-react-hooks/

但是在滚动时，只有当我停止滚动时，框架才会更新。我对画布的期望结果是在滚动时以一种流畅的方式渲染。换句话说，框架应该在我的props.scrollPos每次更新时都在更新。

关于父对象，需要知道的是它正在使用scrollTop传递滚动位置。这个组件应该是可重用的，并且相对于它的父组件工作，这就是为什么我选择不在内部保持滚动状态的原因。

您可以在CodeSandbox上查看我的代码here的工作示例

ParallaxVideo.js

...

// request animation frame
// when scrollpos updates the current frame needs to change and cause rerender
// frame = (scrollPos - offset) / playbackConst

const ParallaxVideo = props => {
  ...

  useEffect(() => {
    let requestId;
    const context = canvasRef.current.getContext("2d")
    const offset = heightRef.current.offsetTop
    videoRef.current.currentTime = (props.scrollPos - offset) / playbackConst
    console.log(props.scrollPos)

    const render = () => {
      context.drawImage(videoRef.current, 0, 0)
      requestId = requestAnimationFrame(render)
    }

    render()


    return () => cancelAnimationFrame(requestId)
  })


  return (
    <div 
      style={{height: scrollHeight}}
      ref={heightRef}
    >
      <VideoWrap>
        <Video
          muted
          preload={preload}
          autoPlay={autoPlay} 
          loop={loop} 
          ref={videoRef}
          fitToScreen={fitToScreen}
          onLoadedMetadata={updateHeight}
          playsInline
        >
          {props.children}
        </Video>
        <Canvas ref={canvasRef}/>
      </VideoWrap>
    </div>
  )
}

Answer 1

当然不会更改useEffect应该有一个设置为侦听更改的输入，

useEffect(() => {
    let requestId;
    const context = canvasRef.current.getContext("2d")
    const offset = heightRef.current.offsetTop
    videoRef.current.currentTime = (props.scrollPos - offset) / playbackConst
    console.log(props.scrollPos)

    const render = () => {
      context.drawImage(videoRef.current, 0, 0)
      requestId = requestAnimationFrame(render)
    }

    render()


    return () => cancelAnimationFrame(requestId)
  },[props.scrollPos])