ReactJS和单独的模型

Question

我正在将ReactJS视为我的应用程序中的视图,它具有模型和一组组件.我可以看到我的模型如何与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,我在这里有一个非常糟糕的编写器示例,显示我是如何使它以错误的方式工作的.我怎么能这样做？

Answer 1

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

但是,有一些有趣的方法可以证明这个问题.

其中一个是Facebook的Flux模式.它基于数据存储的概念,它与React组件分开保存,而不直接依赖它们.相反,通过调度操作(例如,用户登录,应用过滤器)对模型数据进行更改,这可以被视为类似事件.然后由中央调度员将这些行动发送到不同的商店.

每个商店都拥有应用程序状态的不同部分,并根据调度的操作不断更新它.您的React组件现在可以选择需要呈现的状态部分,并订阅对应用程序状态的此特定部分的更改.

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

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

但请注意,如上所述,这只是众多可能的方法之一.虽然理解单向数据流和不可变数据结构背后的价值,但这可能是一个很好的切入点,这使得这种模式如此强大.