我将 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 组件现在可以选择它们需要呈现的状态部分,并订阅对应用程序状态的这个特定部分的更改。
(来源: github.io )
通过应用此模式,您可以保持 React 组件之间的依赖关系,这些组件将您的用户界面呈现为应用程序状态和商店的函数,商店代表您的应用程序模型并包含所有业务逻辑。
这确保了应用程序的各个部分保持可重用和可替换,并且应用程序的状态始终保持一致。
但是请注意,如上所述,这只是众多方法中的一种。尽管了解单向数据流和不可变数据结构背后的值(value),使这种模式如此强大,但这可能是一个很好的切入点。