React Hooks 和 useState 的使用

2022-01-19 00:00:00 reactjs frontend javascript react-hooks

我有一个包含一些状态的组件.有什么区别

I have a component with some states. What is the different between

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

Example 2 is more verbose. But all the hooks example I see on the internet prefer the Example 2's style. Is there any performance penalty or best practice that preferred one or another??

推荐答案

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

Both approaches will end up with the same end goal, whereby you will create a component that renders the following element: <div>{{ state.a }} and {{ state.b }}</div>

但是,这是示例 1 的场景.如果您希望同时更新两个状态(ab),则必须调用 2 种不同的方法来更新状态:

However, here's a scenario for Example 1. If you wish to update both states(a, and b) , you will have to call 2 different methods to update the state:

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

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

On the other hand, for Example 2, you will only need to call 1 method to update the state.

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

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

However, the downside of this approach is that, you will have to spread the entire state object if you only wish to update only one of the properties (credit goes to @DrewReese for pointing this out). For instance, if you want to update only b,

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

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

That being said, it will not be accurate to state that Example 1 is less "performant", as React will batch the updates if they are called within the same event handler, and cause a single re-render.

相关文章