函数是否应该始终用于传递数组或对象的 setState？

Question

为了提高我对函数式组件中 React 的理解，我看到一些组件在传播数组或对象时通过函数传递

seState

。当我引用 docs 时，我看到：

与类组件中的

setState

方法不同，

useState

确实 不自动合并更新对象。你可以复制这个 通过将函数更新器形式与对象扩展相结合来实现行为 语法

所以我试图理解为什么要这样实现：

const [count, setCount] = useState([initialCount]);

setCount([...count, newCount])

对于数组和对象来说不是首选，而这个：

const [count, setCount] = useState([initialCount]);

setCount(prevCount => [...prevCount, newCount])

是首选。在我对答案的研究中，我还没有找到关于这个问题的答案，我已经通读了：

• 使用 React Hook 将更新器传递给

  setState

  ，将

  (state, props)

  作为更新状态的参数，相当于什么？
• 如何在react中使用带有useState钩子的回调
• 使用扩展运算符设置状态

我可以确定该功能需求的唯一结论是：

• 可能是由于对象或数组在内存中的存储方式导致的
• 传递的数据大小

为什么当涉及到

useState

中的数组和对象时，应该使用与常用函数相反的函数来传递？

Answer 1

将函数传递给

useState

调度可能是最佳实践，以避免渲染不同步，特别是如果您使用异步方法来更新状态，而且任何时候您的新状态依赖于先前的状态（例如，甚至递增）数字，不仅仅是对象和数组）。

正如 Kent C. Dodds 所说明的那样，当新状态更新依赖于先前状态时，在闭包以及渲染和函数调用的时间方面存在问题。

如果您想将数据与先前的状态合并，您需要确保与最新的状态合并（截至该特定合并调用）。

setState dispatch

提供之前的状态作为第一个参数。您可以确定这是最新状态（对于该合并），并且您不会失去同步数据或无序更新。

Answer 2

可能在 React 的 useState 中更新数组或对象时，首选函数更新器形式 (prevState => {...})，因为 React 中的状态更新是异步的。这意味着直接使用当前状态（例如 setState([...state, newValue])）可能会导致数据陈旧或过时，尤其是在快速更新期间或 React 批量更新时。

通过使用函数形式（例如，setState(prevState => [...prevState, newValue])），您可以确保始终使用最新的状态。这可以避免因引用旧状态值而导致的错误，并确保即使更新快速连续发生也能正确应用更新