理解useCallback和setState

Question

我有一些简单的代码来测试useCallback和setState钩子。首先，我试着这样写：

const App = () => {

    const [count, setCount] = useState(0)

    const increase = useCallback(() => {
        setCount(count + 1) // Passing value to change state
    }, [])
    console.log(count)

    return (
        <div id="main">
            <h1>Count: {count}</h1>
            <button onClick={increase}>Increase</button>
        </div>
    )
}


export default App;

然后，将回调传递给setCount，如下所示：

const App = () => {

    const [count, setCount] = useState(0)

    const increase = useCallback(() => {
        setCount(count => count + 1) // Passing callback
    }, [])
    console.log(count)

    return (
        <div id="main">
            <h1>Count: {count}</h1>
            <button onClick={increase}>Increase</button>
        </div>
    )
}


export default App;

我知道在这种情况下使用useCallback是很奇怪的，只是为了进行一些测试。问题是，为什么我将回调传递给setCount，增加按钮工作正常，而第一个按钮只在第一次单击时重新呈现。

Answer 1

在第一种情况下，useCallback关闭了count，当时count是0，所以它总是将值更改为1。

因此，要使其正常工作，您应该将count依赖项添加到useCallback中，如下所示：

CODESANDBOX LINK

const increase = useCallback(() => {
    setCount(count + 1); // Passing value to change state
}, [count]);

在第二种情况下，它不是从闭包中获取值，而是接受当前值并向其添加一个值并设置值。

ADDITIONAL INFO

您可以使用react-hooks/exhaustive-deps eslint规则来知道缺少哪个依赖项，并告诉您如何纠正它。

Answer 2

这里没有正确地使用useCallback()：依赖关系数组应该包含count。所以：

const increase = useCallback(() => {
  setCount(count + 1) // Passing value to change state
}, [count])

如果将空数组作为依赖项，则将在组件的生存期内对其进行回溯，并且不会更新当前的count值。

来源：https://reactjs.org/docs/hooks-reference.html#usecallback

代码沙箱

另外，在这种情况下，使用useCallback()是“过度优化”，我们正在使代码复杂化，而对最终用户的性能影响并不明显。我只会使用它来防止在复杂的视图中，例如在一个庞大的列表中的更改者。