React useState 与对象的最佳实践？

Question

与 classes 中的 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可以存储对象，但是在class组件中，当你使用[=17更新状态时=]，与旧的合并。使用useState，更新函数用新状态替换旧状态（没有合并）。

我经常像下面这样实现：

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

If I'm correct, updating an object state will re-render all fields of the object state, which supposedly will be more expensive for the app?

我的这种方法正确吗？

Answer 1

如果我没记错的话，如果你将状态初始化为组件，然后更新它，例如使用 useEffect，你会重新渲染整个 component.If 性能是你担心的，你可以使用变量作为对象的值，并更新该变量。

Answer 2

您可以这样做，但这不是 official React docs 所做或推荐的。它仍然是一种有效的方法。

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

将修改状态的所有代码放在一个地方（reducer）可以让您更好地推理重置状态等操作。

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

React useState 与对象的最佳实践？

Best practice for React useState with objects?

reactjs

react-hooks

use-state