React useState 与对象的最佳实践？

Question

与 from 类不同state，您不限于单个对象。使用useState，您可以为每种情况创建单独的值，如下所示：

const [name, setName] = useState('John');
const [email, setEmail] = useState('john@example.com');
const [age, setAge] = useState(25);

但是，我发现这非常肮脏，并且更喜欢只使用一个useState用对象初始化的：

const [user, setUser] = useState(
  { name: 'John', email: 'john@example.com', age: 25 }
);

---

我知道没有严格的限制并且useState可以存储对象，但是在类组件中，当您使用更新状态时this.setState，它会与旧的合并。使用 时useState，更新函数会用新状态替换旧状态（没有合并）。

我经常像下面这样实现：

setUser(prevStat => ({
...prevState,
  name: 'Daniel'
}));

如果我是正确的，更新对象状态将重新渲染对象状态的所有字段，这对于应用程序来说可能会更昂贵？

• 我的这种方法正确吗？

Answer 1

你可以这样做，但这不是React 官方文档所做或推荐的。这仍然是一种可行且有效的方法。

\n

如果您发现自己使用状态对象是因为有很多状态，或者管理交互变得复杂，那么现在可能是考虑使用带有useReducer. 您可以将样板文件和逻辑移出直接调用站点，并更好地保留对状态对象属性之间关系的概述。使用减速器，您\xe2\x80\x98d 只需编写dispatch({ type: "SET_NAME", name: "Daniel" }).

\n

将修改状态的所有代码放在一处（reducer）可以让您更好地推理诸如重置状态之类的操作。

\n

返回的调度函数useReducer也很稳定，非常适合传递给子组件，从而更容易将组件重构为更小的组件。

\n