Question

紧接着关于React Hooks的Scrimba教程，我一直在尝试使用useEffect和useCallback来防止组件在requestAnimationFrame期间重新渲染。我目前拥有Playground组件来更新和渲染count状态，并拥有一个子<Calculate />组件来计算渲染次数。

下面，我正在使用useCallback，它似乎正在工作。有谁知道return函数是否可以像useEffect钩子一样在useCallback钩子中工作以清理requestAnimationframe？我在下面的代码中使用了它，但是不确定如何检查'cancelAnimationFrame'是否正在实现？

import React, { useState, useRef, useCallback } from 'react'


export default function Playground() {
  const [count, setCount] = useState(0)

  const cb = useCallback(()=>{
      let anim,
        loop = () => {
           setCount(prev => prev + 1) 
           anim = requestAnimationFrame(loop)
        }
        loop()
        return()=> cancelAnimationFrame(anim)
  }, [])

  return (
    <>
    <h1>{count}</h1>
      <Calculate cb={cb} />
    </>
  )
}

const Calculate = React.memo(({ cb }) =>{
  cb()
  const renderCount = useRef(1)
  return <div>{renderCount.current++}</div>
})

反应useCallback而不是useEffect进行动画处理

0 个答案: