Лучшие практики для изменчивых | неизменяемые предметы

Question

Должны ли мы использовать первый или второй способ для обновления объекта настроек в состоянии?Какой из них является лучшей практикой для изменчивых |неизменное понятие?

state = {
  settings: {
    at: [],
    // other keys
  }
}


addHour = () => {
    const { settings } = this.state;

    const time = moment();
    time.set({ minutes: 0, seconds: 0 });

    // First Way
    settings.at.push(time);
    this.setState({ settings });

    // Second Way
    const new_settings = {
        ...settings
        at: [...settings.at, time]
    }
    this.setState({ settings: new_settings });
};

Answer 1

Код

const { settings } = this.state;

это не копирование, это просто ссылка, а когда вы делаете settings.at.push(time);, вы фактически изменяете оригинальный объект

let state = {
  settings: [1,2,3]
}
let {settings} = state
settings.push(4)

console.log(settings)
console.log(state)

Если ваш массив настроек всегда имеет один уровень глубины, вы можете использовать spread operator, в противном случае вы можете использовать JOSN.parse(JOSN.stringify()) для создания глубокого клона

let state = {
  settings: [1, 2, 3]
}
let settings = [...state.settings]
settings.push(4)

console.log(settings)
console.log(state)

Answer 2

Во-первых, вы все еще изменяете исходный объект состояния.Это называется ссылкой на оригинальный объект.Второй способ делает клона из государства.Это 2 разных объекта.

Answer 3

Во-первых, вы ссылаетесь на фактическое состояние, изменяя его.

Во-вторых, вы не мутируете состоянием, все равно помните одну вещь:

этот тип присваивания не является потокобезопасным, посмотрите на следующий пример:

const { settings } = this.state;

const time = moment();
time.set({ minutes: 0, seconds: 0 });

// If at this execution point another procedure changes the state (e.g. setting another key in the state object)
const new_settings = {
    ...settings
    at: [...settings.at, time]
};
// You are actually setting an "old" state for some keys
this.setState({ settings: new_settings });

Я бы пошел на следующее:

this.setState(oldSettings => {
    const newSettings = {...oldSettings};
    //modify the copy newSettings
    return newSettings;
});

N.B. Если состояние сложное, вы должны его глубоко клонировать!