Реагировать - Функциональное setState (предыдущее состояние) отличается от нового обновленного значения?

Question

В настоящее время я пытаюсь выучить React на нескольких последних курсах.

Чтобы обновить состояние, большинство курсов предлагают пойти по этому пути:

 const updatedNinjas = [...this.state.ninjas, newNinja];

    this.setState({
      ninjas: updatedNinjas
    });

Однако, поскольку setState является "асинхронным", официальная документация реагирует рекомендует использовать предыдущее состояние и обновлять его на основе этого.

this.setState(prevState => ({
      ninjas: [...prevState.ninjas, newNinja]
    }));

Обе решают одну и ту же проблему (поскольку мы используем новый массив каждый раз в первом примере) или только последний является надежным?

Answer 1

Как вы новичок, так что я хотел бы объяснить вам немного.

в коде ниже

... this.state.ninjas

эти ... называется синтаксисом распространения , так что следующий фрагмент кода делает для объединения существующего состояния с новыми элементами; что приводит к повторной визуализации компонента с обновленным состоянием.

const updatedNinjas = [...this.state.ninjas, newNinja];

    this.setState({
      ninjas: updatedNinjas
    });

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

Answer 2

Установка состояний с помощью массива помогла мне в случаях разбивки на страницы, без потери данных из состояний

this.setState(prevState => ({
          ninjas: [...prevState.ninjas, ...newNinja]
}));

Answer 3

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

this.setState(prevState => ({
  ninjas: [...prevState.ninjas, newNinja]
}));

или даже:

this.setState(({ninjas}) => ({
  ninjas: [...ninjas, newNinja]
}));

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

Если вы измените состояние с помощью некоторой переменной, которая не на основе любого значения из состояния - вы можете использовать простую версию:

this.setState({
  answer: 42
});

Относительно вашего

так как мы используем новый массив каждый раз в первом примере

действительно, каждый раз вы создаете новый массив, но вы создаете его, используя некоторый набор элементов, которые могут быть неактуальными к тому времени, когда фактическое изменение состояния будет выполнено React под капотом.