我认为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
,I have a very bad codepen example here访问我的模型,了解我是如何以错误的方式使其运作的。我怎么能这样做?
答案 0 :(得分:5)
有几百种方法可以将React视图层与底层模型连接起来。当涉及到模型时,React本身完全与实现无关。
但是,有一些有趣的方法可以解决这个问题。
其中一个是 Facebook&#39; Flux pattern 。它基于数据存储的概念,它与React组件分开保存,而不直接依赖它们。相反,通过调度操作(例如,用户已登录,应用了过滤器)来对模型数据进行更改,这可以被视为类似事件。然后由中央调度员将这些行动发送到不同的商店。
每个商店都拥有应用程序状态的不同部分,并根据调度的操作不断更新它。您的React组件现在可以选择需要呈现的状态部分,并订阅对应用程序状态的这个特定部分的更改。
通过应用此模式,您可以保持React组件之间的依赖关系,从而将用户界面呈现为应用程序状态和存储的函数,这些存储代表应用程序的模型并包含所有业务逻辑。
这可以确保应用程序的各个部分保持可重用和可替换的状态,并确保应用程序的状态始终保持一致。
但是请注意,如上所述,这只是众多可能的方法之一。虽然理解单向数据流和不可变数据结构背后的价值,但这可能是一个很好的切入点,这使得这种模式如此强大。