0

继有关 React Hooks 的 Scrimba 教程之后，我一直在尝试使用，useEffect以及useCallback防止组件在 requestAnimationFrame 期间重新渲染的方法。我目前有一个Playground更新和渲染count状态的组件和一个<Calculate />计算渲染次数的子组件。

下面，我正在使用 useCallback ，它似乎正在工作。有谁知道返回函数是否​​在 useCallback 挂钩中工作以清理 requestAnimationframe，就像在 useEffect 挂钩中一样？我在下面的代码中使用了它，但不确定如何检查“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>
})
4

0 回答 0