在 React 中使用对象构造函数？

Question

据我了解，大多数情况下我们都在定义state对象，例如object literal 。 我还没有看到对象构造函数的方式。 从我的例子来看，使用构造函数创建 person 很简洁，并且可以简化更复杂的对象。 我的问题是；

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

注意：重新渲染需要一个对象的新实例，这是react的一个主要概念

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() 等的其他内容...

这个变种更好

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

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

如果你想使用模型，请阅读这篇文章。 使用 TS，您可以防止“被遗忘的属性”等。

有限元

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>
 )
}