Оператор распространения в React .setState ()

Question

Учитывая следующий фрагмент, извлеченный из компонента класса React:

constructor(props) {
    super(props)
    this.state = { active: true }
  }

  deactivate = () => {
    this.setState({ ...this.state, active: false })
  }

Какова цель оператора распространения в метод stopCounter ()? Приложение также работает, удаляя его:

  deactivate = () => {
    this.setState({ active: false })
  }

Answer 1

Цель просто установить active на false, а остальные оставить без изменений. Вы можете редактировать часть своего состояния, просто передав необходимые имена и пропустив остальные.

Answer 2

Оба работают в этом случае, но вам не нужно это использовать. Просто установка состояния будет в порядке:

this.setState({active: false})

Но позвольте мне объяснить, что если у вас есть вложенный уровень состояний, например:

state = {
  foo: {
   a: 1,
   b: 2,
   c: 3
  }
}

И когда вам нужно обновить только состояние c в foo, вам нужно объединить это состояние следующим образом:

this.setState({
  ...this.state.foo,
  c: 'updated value'
})

Итак, синтаксис распространения объединяет объект с более поздним объектом. Это похоже на Object.assign .

Answer 3

Второй фрагмент работает, потому что React неявно делает распространение за вас.Согласно документации React для setState:

Вы можете [...] передать объект в качестве первого аргумента setState(): setState(stateChange[, callback]).Это выполняет поверхностное слияние stateChange в новое состояние.