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 , которые я вижу в inte rnet, предпочитают стиль примера 2. Есть ли какие-либо потери в производительности или лучшие практики, которые предпочитали те или иные ??

Answer 1

Оба подхода будут иметь одну и ту же конечную цель, в результате чего вы создадите компонент, который визуализирует следующий элемент: <div>{{ state.a }} and {{ state.b }}</div>

Однако, вот сценарий для Пример 1 . Если вы хотите sh обновить оба состояния (a и b), вам придется вызвать 2 различных метода для обновления состояния:

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

С другой стороны, для Пример 2 , вам понадобится вызвать только 1 метод для обновления состояния.

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

Однако недостатком этого подхода является то, что вам придется распространять весь объект состояния, если Вам нужно только sh, чтобы обновить только одно из свойств (кредит указывается на @ DrewReese за указание на это). Например, если вы хотите обновить только b,

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

При этом будет неверно утверждать, что Пример 1 является менее «производительным», поскольку React будет пакетировать обновления, если они Вызываются в одном и том же обработчике событий и вызывают повторную визуализацию.