reactjs - useCallback() 依赖数组与常量引用回调

Question

根据 React 官方文档，如果组件新状态是使用先前状态计算的，则可以将函数传递给 setState。该函数将接收先前的值，并返回更新后的值。

考虑以下代码片段示例:

const [counter, setCounter] = useState(0);
const btnClick = useCallback(() => setCounter(counter+1), [counter]); //(1)
const btnClick = useCallback(() => setCounter(previous => previous+1), []);//(2)

btnClick 作为渲染按钮的“onClick”事件的回调函数传递。

在 (1) 中，每次修改 counter 状态变量时都会更新 btnClick 函数引用。

在 (2) 中，btnClick 函数引用是在第一个渲染周期中创建的，并在组件生命周期的剩余时间内被缓存；在此级别，状态更新函数将接收先前的状态值并返回更新后的值。

在这个级别，我有 2 个问题:

1- 作为一种好的做法，我应该选择 (1) 还是 (2)？使用 (1) 而不是 (2) 有什么优势吗？

2- (2) 是否适用于原始类型和引用类型？ (检查下面，我将状态从整数切换为对象)

const [counter, setCounter] = useState({cntr:1});
const btnClick = useCallback(() => setCounter({...counter,cntr:counter.cntr+1}), [counter]); //(1)
const btnClick = useCallback(() => setCounter(previous => return {...previous ,cntr:previous.cntr+1}), []);//(2)

(2) 中的“previous”是否仍然引用先前的状态值，或者它是否引用在组件首次渲染周期中缓存的陈旧状态？

感谢您的帮助。

Answer 1

所以，这是一个很深的问题，让我们试着解释一下它是如何工作的。

1. useCallback 只是向您保证 btnClick 不会重新初始化。这与 useState 和函数体完全无关。
2. 在 React 社区中，我们在这一点上没有任何好的实践。不同之处在于，当您调用 setState 时，您会 promise 您有时值将被更新。例如:

setValue(1);
setValue(2);
setValue(3); 

并不是说react会更新三次state。 React 可以将其合并为一个更新并仅设置最后一个值。

1. 将函数作为参数传递给 setState

const myFunc = (oldValue) => ({}) 
useValue(myFunc)

这意味着 React 看到您传递函数，然后所有 useValue 将立即被调用，after useValue(myFunc) 将被调用。开发人员需要它来处理放置在状态中的last 数据。

Does "previous" in (2) still reference the previous state value ordoes it refer to a stale state that was cached during the componentfirst render cycle?

因此，作为问题的结果，setState 中的 previous 将是状态的最新值。