Могу ли я рассчитывать на значение useState для расчета нового состояния?

Question

Учитывая простое состояние хука:

const [count, setCount] = React.useState(0);

Я хочу увеличить или уменьшить счетчик. В основном делают то же самое, что показано в документах hooks .

Но как известный факт для старой функции this.setState:

Поскольку this.props и this.state могут обновляться асинхронно, вы не должны полагаться на их значения для вычисления следующего состояния.

, и правильный способ обновления состояния на основе старого состояния - :

this.setState((state) => ({
  counter: state.counter + 1
}));

То же самое относится к setCount? Или я могу быть уверен, что count всегда актуален?

Answer 1

Я не уверен, точный лог c и сценарий использования состояния count, но, как правило, вам нужно будет позвонить

setCount(count + 1); 

Или, функциональные обновления с помощью обратных вызовов

setCount(prev => prev + 1); 

Если вы хотите sh обновить ваше состояние. Однако обратите внимание, что обновление состояния может быть асинхронным, что аналогично тому, как работает компонент класса setState(). Вы можете обратиться к useState документация для более подробной информации.

Answer 2

useState крючки работают иначе, чем this.setState. Вызов вашего установщика, setCount в приведенном ниже примере, работает асинхронно, но, поскольку count не изменяется во время рендеринга функционального компонента, оценка определяется c.

Следующий пример, скопированный дословно из Краткий обзор в документах React, безопасен на 100% (у вас не будет ошибок при вызове методов на размонтированных компонентах) и будет работать как и ожидалось:

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Единственный раз, когда потребуется , чтобы использовать функциональное обновление, когда вы передаете функцию в setCount, - это если вам нужно несколько раз вызвать setCount, когда ссылаясь на состояние. Обратите внимание, что это не потому, что setState является асинхронным, а потому, что count не обновляется до следующего рендеринга.

Например, это будет проблемой :

<button
  onClick={() => {
    setCount(count + 1)
    setCount(count + 1) // since `count` is not dynamically updated mid-render, this evaluates to the same value as above
  }}
/>

На практике этот паттерн встречается относительно редко. Таким способом вы бы не вызывали сеттер несколько раз в одной функции. Вместо этого, если вы передаете установщик в качестве опоры для потомков, и эти потомки ссылаются на состояние, контролируемое установщиком, тогда вы должны использовать шаблон функционального обновления. Однако даже в этом сценарии React будет повторно визуализировать компонент с каждым последующим значением .