Question

在我的React / Javascript应用中，我有一个如下的组件类：

// CustomComponent.js

import * as model from "model.js";

class CustomComponent extends Component {

  state = {
    someObject: null
  };

  constructor() {
    super();
    this.state.someObject = model.someObject;
  }

  ... // render, etc...

}

我有一个模型文件负责存储和计算内容：

// model.js

export var someObject = {
  property1,
  property2,

  ...

  // Here are functions processing the data, for instance
  // someObject could be a matrix for a game, handling all the game logic

}

function changeObject() {
  // Somehow this function get called, from an animation loop or an external class for instance

  // This function changes properties of the object
}

现在，我希望在修改网格对象时更新/渲染组件（“自定义”及其子元素）。现在，处于状态的对象已更改，但是由于未调用setState()，因此组件未更新。

该如何更改我的实现？我想保留一个单独的文件来处理模型逻辑。

Answer 1

您可以使用状态容器来执行此操作。有多个此类库：

Redux可能是React社区中最受欢迎的。这是一个非常干净的应用程序级状态容器/存储-Flux和Elm的实现。在这里，状态是不可变的，您可以使用操作和化简器更改属性，并从任何组件的应用程序状态访问它们。
MobX是另一个将您的状态包装到observables中的状态。这里的状态是可变的，您有多个商店（而不是Redux中的应用程序级别的单个商店）
其他：不太受欢迎的是RxJS（观察者模式），Alt（通量），Relay（通量+ GraphQL）

Answer 2

如果您不想添加redux e.c.t.您可以使用forceUpdate。 https://reactjs.org/docs/react-component.html#forceupdate

与模型文件共享的处于组件状态的对象

2 个答案: