Неудобная реализация функции добавления

Question

Я изо всех сил пытаюсь понять, почему это:

addItem = item => {
    this.setState({ grudges: [grudge, ...this.state.grudges] });
}

существует довольно неловкая реализация.Разве

this.state.grudges.push(grudge)

не хватит?

Answer 1

В реакции вы должны изменять состояние только с помощью setState:

Никогда не изменяйте this.state напрямую, так как последующий вызов setState () может заменить сделанную вами мутацию.Относитесь к этому состоянию как к неизменному.

См. https://reactjs.org/docs/react-component.html (внизу страницы)

Answer 2

Этого будет недостаточно, потому что Состояние реакции, как ожидается, будет неизменным :

Никогда не изменяйте this.state напрямую, так как последующий вызов setState () может заменить мутациюты сделал.Обрабатывайте this.state так, как если бы оно было неизменным.

Эта «неуклюжая реализация» также неверна, this.state не следует использовать вместе с this.setState, поскольку setState является асинхронным и может привести к условиям гонки:

Думайте о setState () как о запросе, а не как о немедленной команде для обновления компонента.Для лучшего восприятия производительности React может задержать ее, а затем обновить несколько компонентов за один проход.React не гарантирует, что изменения состояния будут применены немедленно.

<...>

setState () не всегда сразу обновляет компонент.Это может пакетировать или отложить обновление до позже.Это делает чтение this.state сразу после вызова setState () потенциальной ловушкой.

Правильный способ - использовать функцию обновления:

addItem = item => {
    this.setState(({ grudges }) => ({ grudges: [grudge, ...grudges] }));
}

Это дополнительно выигрывает от деструктурирования синтаксиса.

Answer 3

Это необходимо, потому что React не отслеживает изменения в состоянии, например, Vue.Вы должны явно сказать, реагировать, что состояние меняется.Если вы измените состояние, изменив напрямую this.state, состояние будет обновлено, но пользовательский интерфейс не будет обновлен, поскольку React не будет знать об этом изменении.