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

Posted 2023-03-16

【中文标题】是否应该始终将函数用于传递数组或对象的 setState？

【英文标题】：Should a function always be used for a setState that gets passed an array or object?

【发布时间】：2021-12-24 21:58:42

【问题描述】：

想要提高我对函数式组件中 React 的理解，我看到一些在扩展数组或对象时通过函数传递 seState。当我引用docs 时，我看到了：

与类组件中的 setState 方法不同，useState 确实 不会自动合并更新对象。你可以复制这个 通过将函数更新器形式与对象传播相结合的行为 语法

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

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

setCount([...count, newCount])

当涉及到数组和对象时，这不是首选：

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

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

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

What is the equivalent of passing an updater to setState that takes (state, props) as an argument to update state, using React Hook? How to use callback with useState hook in react setState with spread operator

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

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

为什么当涉及到 useState 中的数组和对象时，它应该使用与常用函数相反的函数来传递？

【参考方案1】：

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

As Kent C. Dodds illustrates，当新的状态更新依赖于先前的状态时，闭包以及渲染和函数调用的时间会出现问题。

如果您想将您的数据与之前的状态合并，您需要确保与最新的状态合并（在特定的合并调用中）。 setState dispatch 提供之前的状态作为第一个参数。您可以确定这是最新状态（对于该合并），您不会失去同步数据或无序更新。