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

【问题标题】：Using object constructor in React?在 React 中使用对象构造函数？
【发布时间】：2020-03-04 10:57:33
【问题描述】：

据我了解，大多数情况下我们在state 中定义对象，例如对象字面量。我还没有看到 Object Constructor 的方式。 From my example，使用构造函数创建人对于更复杂的对象来说是简洁和简化的。我的问题是；

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;

【问题讨论】：

1) 不，只要类方法不改变类属性。只是看不到任何好处

标签： javascript reactjs oop

【解决方案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>
 )
}

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

F.E.

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

【讨论】：