Зачем в React так записывают в state?

Question

[mamaanarhiya]

Для чего нужна такая запись?

this.setState({
      ...this.state,
      some_data: {
        ...this.state.some_data,
        ...input,
      },
    });

Чем она отличается от такой?

this.setState({
      some_data: {
        ...input,
      },
    });

да и зачем нужны эти многоточия?

Answer 1

[Антон Спирин]

Во-первых в setState в корень предыдущее состояние передавать не нужно, так под капотом к нему так и так подмешается предыдущее состояние, в не зависимости от того, что вы туда передадите. Примерно так:
state = { ...prevState, ...newState };

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

this.setState(prevState => ({
  some_data: {
    ...prevState.some_data,
    ...input,
  },
});

Comments

[kn1ght_t]

все верно

p.s. а многоточия - это деструктуризация объекта из es6 (и , да, здесь она не нужна)

[qwead]

kn1ght_t, p.s. деструктуризация это другое. А многоточие это музыкальная группа (ES6: Операторы Spread и Rest).

ref: Оператор расширения

[kn1ght_t]

qwead, каюсь, был не прав
спасибо, что поправили)

Answer 2

[Даша Циклаури]

создается shallow-copy объекта, то есть оператором "..." (spread operator) копируются свойства объекта, это сделано для того чтобы не терять данные при обновлении одного свойства
допустим у тебя был объект состояния такой структуры

let state = {
  x:1,
  y:2,
  z:3
}

ты хочешь изменить поле y, для этого тебе нужно скопировать все поля и переназначить y
state = { ...state, y:25};
другой вопрос зачем копировать, если можно мутировать (MobX), это фишка называется иммутабельность (Redux), чтобы понять изменилось ли состояние быстрее проверить изменилась ли ссылка на объект, чем делать полный diff, в angular next такая штука в детекторе включается через ChangeDetectionStrategy.OnPush

Comments

[Антон Спирин]

В setState корень состояния подмешивать не нужно, так как после вас React под капотом сделает то же самое. Лишняя операция.