javascript - 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 的风格。是否有任何性能损失或最佳实践偏爱一种或另一种？

score 4 · Accepted Answer

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

但是，这里是Example 1的一个场景。如果您希望更新两个状态（a和b），您必须调用 2 个不同的方法来更新状态：

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

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

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

但是，这种方法的缺点是，如果您只想更新其中一个属性，则必须传播整个状态对象（感谢 @DrewReese指出这一点）。例如，如果您只想更新b，

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

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

1 回答 1