如何在 Reactjs 的组件状态下使用 OOP？

Posted 2023-02-22

【中文标题】如何在 Reactjs 的组件状态下使用 OOP？

【英文标题】：How use OOP in component state of Reactjs?

【发布时间】：2019-07-04 04:27:03

【问题描述】：

我想以组件状态存储类的自定义实例，但我不知道如何以正确的方式更改数据

在更改实例之前，我会克隆对象。

例如，我有一个带有一些属性的自定义对象：

this.state=
 user: new User();

当我需要更改数据时

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

每次都使用 cloneDeep 可以吗？也许有更好的方法来更改数据并且不破坏反应生命周期？

【问题讨论】：

您在渲染方法中使用this.state.user 吗？如果不是，您不应该将其存储在组件的状态中（将其放在其他地方，例如this.user，然后您可以随意更改它）。即使是这样，您最好将其存储在其他地方，然后将渲染所需的信息复制到您的组件状态中。

（另外，如果您显示更多组件的代码，可能会更容易提出更好的解决方案！）

是的，我在渲染中使用它，有时我需要用当前值检查以前的值。如果没有克隆，生命周期就会中断，我无法比较 componentDidUpdate

中的值

【参考方案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 状态最好使用普通对象的原因。