Реагировать на аргументы setState - PullRequest
Новая
       2

Реагировать на аргументы setState

2 голосов
/ 16 июня 2019

Я хотел бы знать разницу между следующими двумя версиями кода.Обе версии делают то же самое.

1) Здесь только переменная counter используется для получения текущего значения 

const Counter = () => {
  const [counter, setCounter] = useState(0);
  return <button onClick={() => setCounter(counter + 1)}>{counter}</button>;
}

2) Эта версия передает функцию setCounter 

const Counter = () => {
  const [counter, setCounter] = useState(0);
  return <button onClick={() => setCounter(c => c + 1)}>{counter}</button>;
}

Официальная документация гласит:

Если новое состояние вычисляется с использованием предыдущего состояния, вы можете передать функцию setState.Функция получит предыдущее значение и вернет обновленное значение.

Так что же не так с первым параметром?Есть ли подводные камни?

1 Ответ

4 голосов
/ 16 июня 2019

С конкретным кодом в вашем примере у вас есть предыдущее значение, так что нет большой разницы.Но иногда нет.Например, предположим, что вы хотели иметь запомненную функцию обратного вызова.Из-за памятки значение counter блокируется при создании замыкания и не обновляется. 

const Counter = () => {
  const [counter, setCounter] = useState(0);

  // The following function gets created just once, the first time Counter renders.
  const onClick = useCallback(() => {
    setCounter(c => c + 1); // This works as intended
    //setCounter(counter + 1); // This would always set it to 1, never to 2 or more.
  }, []); // You could of course add counter to this array, but then you don't get as much benefit from the memoization.

  return <button onClick={onClick}>{counter}</button>;
}
...