javascript - ReactJS 和分离模型

Question

我将 ReactJS 视为我的应用程序中的 View ，它有一个模型和一堆组件。我可以看到我的模型如何与 React 对话，但 React 如何与我的应用程序的其余部分对话？

将数据或模型传入 React 非常简单:

var ui = ReactDOM.render(<UI model={model} />, document.getElementById('ui'));

我假设你可以像这样设置模型:

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

尽管根据文档，state 应该被视为不可变的，因为它不会立即更新。所以我无法通过 state 访问我的模型，I have a very bad codepen example here展示我是如何让它以错误的方式工作的。我还能怎么做？

Answer 1

实际上有数百种方法可以将 React View 层与底层模型连接起来。在模型方面，React 本身是完全不可知的。

---

但是，有一些有趣的方法可以解决这个问题并证明了自己。

其中之一是 Facebook 的 Flux pattern 。它基于数据存储的想法，这些数据存储与 React 组件分开保存，而不直接依赖于它们。相反，您的模型数据的更改是通过分派(dispatch)操作(例如用户登录、应用过滤器)来完成的，这可以被认为是类似的事件。然后，这些操作由中央调度程序分发到不同的商店。

每个商店都持有应用程序状态的不同部分，并根据分派(dispatch)的操作不断更新它。您的 React 组件现在可以选择它们需要呈现的状态部分，并订阅对应用程序状态的这个特定部分的更改。

_{(来源:github.io)}

通过应用此模式，您可以保持 React 组件之间的依赖关系，React 组件将您的用户界面呈现为应用程序状态的函数，而存储则代表您的应用程序模型并包含所有业务逻辑。

这可以确保您的应用程序的各个部分保持可重用和可替换，并且您的应用程序的状态始终保持一致。

---

但是请注意，如上所述，这只是众多可能方法中的一种。不过，了解使该模式如此强大的单向数据流和不可变数据结构背后的值(value)可能是一个很好的切入点。