Реагируйте на хуки, чтобы переключить setState

Question

До сих пор я видел два способа обработки переключателя

во-первых, установить состояние на основе предыдущего состояния

export default function App() {
  const [show, setShow] = useState(false);
  const handleClick = () => {
    setShow(s => !s);
  };
  return (
    <div>
      <div>show: {String(show)}</div>
      <button onClick={handleClick}>BTN</button>
    </div>
  );
}

секунду, передать состояние непосредственно в качестве аргумента

export default function App() {
  const [show, setShow] = useState(false);
  const handleClick = () => {
    setShow(!show);
  };
  return (
    <div>
      <div>show: {String(show)}</div>
      <button onClick={handleClick}>BTN</button>
    </div>
  );
}

какой из них правильный? В моем понимании второе может не работать, так как установленное состояние является асинхронным c, возможно, он не сможет получить правильное состояние, если я нажму кнопку несколько раз

Answer 1

Первый верен:

setShow(s => !s);

Хотя второй работает в этом случае , он не верен:

// bad code
setShow(!show);

Почему?

Состояние установки является асинхронным, но на самом деле это означает, что состояние настройки откладывается до повторного рендеринга.

Пример:

const [myNum, setMyNum] = useState(0)

const handleUpdate = () => {
  setMyNum(myNum + 1)
}

Если мы назовем handleUpdate функция, новое значение myNum увеличивается на 1. Это работает правильно, но как насчет этого:

const [myNum, setMyNum] = useState(0)

const handleUpdate = () => {
  setMyNum(myNum + 1)
  setMyNum(myNum + 1)
}

Вы можете подумать, что myNum теперь 2, но это не так, это 1 .

Это происходит потому, что значение myNum не изменяется до повторного рендеринга, поэтому вы, по сути, пишете следующее:

const handleUpdate = () => {
  setMyNum(0 + 1)
  setMyNum(0 + 1)
}

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

Это работает правильно:

const handleUpdate = () => {
  setMyNum(p => p + 1)
  setMyNum(p => p + 1)
}

myNum теперь равно 2.

Даже если вы устанавливаете значение только один раз, вы должны придерживаться хорошей практики. Когда ваше приложение становится сложным, и несколько разных действий могут установить состояние в любое время, вы не хотите, чтобы вас застали чем-то, что вы писали месяцы go, о которых вы никогда не думали, что это будет иметь значение.