Question

据我了解，大多数情况下，我们都是在state中定义对象，例如 objectliteral 。我还没有看到对象构造器的方式。 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;

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

如果要使用模型，请阅读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>
 )
}

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

1 个答案: