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更详细。但是我在互联网上看到的所有 hooks 示例都喜欢示例2的样式。是否存在任何优先选择一个或另一个的性能损失或最佳实践？

Answer 1

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

但是，这是示例1 的情况。如果您希望同时更新两个状态（a和b），则必须调用两种不同的方法来更新状态：

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

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

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

但是，这种方法的缺点是，如果只希望更新其中一个属性，则必须散布整个状态对象（要指出这一点，贷记到@DrewReese）。例如，如果您只想更新b，

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

话虽如此，但说出示例1的“性能不佳”并不准确，因为如果在同一事件处理程序中调用更新，React将对这些更新进行批处理，并导致一次重新呈现。