我将 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 显示了我是如何让它以错误的方式工作的。我还能怎么做?

最佳答案

有数百种方法可以将 React View 层与底层模型连接起来。当涉及到模型时,React 本身完全与实现无关。

然而,有一些有趣的方法已经证明了这个问题。

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

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

javascript - ReactJS 和单独的模型-LMLPHP
(来源: github.io )

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

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

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

10-08 08:01
查看更多