React Hooks 和 useState 的使用

Question

我有一个带有一些状态的组件。两者之间有什么区别

示例 1：

function CompA() {
[a, setA] = useState(0);
[b, setB] = useState("Test");
return (<div>{{ a }} and {{ b }}</div>);
}

和示例 2：

function CompA() {
[state, setState] = useState({a: 0, b: "Test"});
return (<div>{{ state.a }} and {{ state.b }}</div>);
}

示例 2 更详细。但是我在互联网上看到的所有钩子示例都更喜欢示例 2 的样式。是否有任何性能损失或最佳实践首选一个或另一个？

Answer 1

这两种方法最终都会达到相同的最终目标，即您将创建一个呈现以下元素的组件：<div>{{ state.a }} and {{ state.b }}</div>

但是，下面是示例 1的方案。如果你想更新两个状态(a和b(，你必须调用2个不同的方法来更新状态：

setA(1);
setB('bbbb');

另一方面，对于示例 2，您只需调用 1 方法来更新状态。

setState({
a: 1,
b: 'bbb',
});

但是，这种方法的缺点是，如果您只想更新其中一个属性，则必须分散整个状态对象(指出这一点归功于@DrewReese(。例如，如果您只想更新b，

setState({
...state, 
b: 'bbb',
});

话虽如此，说示例 1 的"性能"较低是不准确的，因为如果在同一事件处理程序中调用更新，React 将批量更新，并导致单次重新渲染。