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，I have a very bad codepen example here访问我的模型，了解我是如何以错误的方式使其运作的。我怎么能这样做？

Answer 1

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

但是，有一些有趣的方法可以解决这个问题。

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

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

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

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

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