Как использовать ООП в состоянии компонента Reactjs?

Question

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

Перед изменением экземпляра я делаю клон объекта.

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

this.state={
 user: new User();
}

когда мне нужно изменить данные, которые я делаю

const user = _.cloneDeep(this.state.user);
user.setSettings(/*some object of settings*/)
this.setState({user});

Можно ли каждый раз использовать cloneDeep?Может быть, есть лучший способ изменить данные и не нарушать жизненные циклы реагирования?

Answer 1

Обычно нецелесообразно использовать cloneDeep для экземпляров класса, поскольку класс может иметь логику создания экземпляров, которая ломается при клонировании экземпляра.Предпочтительно создать новый экземпляр класса с new, класс также должен поддерживать клонирование, чтобы новый экземпляр успешно гидратировался из существующего экземпляра:

Foo.clone(fooInstance)

Где clone - это что-то вроде:

class Foo {
  static clone(instance) {
    const barArg = instance.bar;
    const bazarg = instance.baz;
    return new Foo(barArg, bazArg);
  }
  ...
}

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

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