Использование конструктора объекта в React?

Question

Насколько я понимаю, в основном мы определяем объекты в state как литерал объекта . Я не видел Object Constructor way. Из моего примера , создание человека с помощью конструктора очень удобно и упрощает для более сложных объектов. Мои вопросы:

1- Использование объектов с ключевым словом new является плохой практикой? и почему

2 - каков правильный подход? и почему

3- Для объектов, которые содержат слишком много вложенных переменных, как мы можем регулярно объявлять?

Также я поставил код,

class Obj {
    name = '';
    surname = '';
    age = 0;
    constructor(name,surname,age) {
        this.name = name;
        this.surname = surname;
        this.age = age;
    }
    getName() {
        return this.name;
    }
}
export default Obj;

import Person from './Object';
function App() {
  const [objs, setObjs] = React.useState({
    trialObj: new Person('trialName','trialSurname',25)
  })
  return (
    <div>{objs.trialObj.getName()}</div>
  );
}

export default App;

Answer 1

Примечание: новый экземпляр объекта необходим для повторного рендеринга, это основная концепция реакции

const UserMeta = () => {
 const [user, setUser] = useState(new User('name', 'age' ... 100 fields));

 return (
    <button onClick={() => setUser(new User('customName' ... 101 values via User.getSomething()))}>
      Update Name
    </button>
 )
}

Выглядит как накладные расходы, когда мы можем сделать

const UserMeta = () => {
 const [user, setUser] = useState(new User('name', 'age' ... 100 fields));

 return (
    <button onClick={() => setUser({ name: 'customName', ...user })}>
      Update Name
    </button>
 )
}

Но в этом случае после нажатия кнопки наш пользователь будет объектом с другими вещами из класса User :(, такими как getName () и т. Д. c ...

Этот вариант лучше

const UserMeta = () => {
 const [user, setUser] = useState({ name: 'name', age: 'age' ... 100 fields));

 return (
    <button onClick={() => setUser({ name: 'Custom, ...user })}>
      Update Name
    </button>
 )
}

Если вы хотите использовать модели, пожалуйста, прочитайте эту статью * 1014. * С помощью TS вы можете предотвратить "забытые свойства" и т. Д. c.

FE

const UserMeta: React.FC = () => {
 const [user, setUser] = useState<UserModel>({ name: 'name', age: 'age' ... 100 fields));

 return (
    <button onClick={() => setUser({ name: 'customName', ...user })}>
      Update Name
    </button>
 )
}