React，useCallback更新了一个状态变量，该变量也存在于其依赖数组中，它如何防止无限重新渲染？

Question

考虑以下代码

import { useMemo, useState, useCallback } from 'react'


function App() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(count + 1);

  }, [count]);

  return <div>
    <Child onClick={handleClick} />
  </div>
}


function Child({onClick}) {
  return (
    <button onClick={onClick}>Click here</button>
  )
}

export default App

在上面的代码中，当单击带有文本“单击此处”的按钮时，计数状态变量会更新，这也是 useCallback 中的依赖项，它作为处理程序传递给按钮的 onClick 属性。

Answer 1

当

count

被你的

handleClick

改变时，事实上，由于

count

是这个

useCallback

的依赖项，react 将丢弃旧的

handleClick

并在发生的新渲染中创建一个新的。就是这样，对

useCallback

的依赖项的更改只会丢弃旧的回调并为您提供一个新的回调..

另一方面，如果您在

useEffect

 中更新状态 a，并且该状态也具有 deps，则通常会发生无限渲染。示例：

const [count, setCount] = useState(0);
useEffect(() => {
    setCount(prev => prev + 1);
}, [count]);  // this is bad, don't do it