Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/84.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/visual-studio-2012/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 反应器和分离模型_Javascript_Html_Reactjs - Fatal编程技术网

Javascript 反应器和分离模型

Javascript 反应器和分离模型,javascript,html,reactjs,Javascript,Html,Reactjs,我将ReactJS视为我的应用程序中的视图,它有一个模型和一组组件。我可以看到我的模型如何与React对话,但是React如何与应用程序的其余部分对话 将数据或模型传入React非常简单: var ui = ReactDOM.render(<UI model={model} />, document.getElementById('ui')); 尽管根据文档,状态应视为不可变,因为它不会立即更新。因此,我无法通过状态访问我的模型,显示我是如何以错误的方式工作的。我还能怎么做呢?实际

我将ReactJS视为我的应用程序中的视图,它有一个模型和一组组件。我可以看到我的模型如何与React对话,但是React如何与应用程序的其余部分对话

将数据或模型传入React非常简单:

var ui = ReactDOM.render(<UI model={model} />, document.getElementById('ui'));

尽管根据文档,
状态
应视为不可变,因为它不会立即更新。因此,我无法通过
状态
访问我的模型,显示我是如何以错误的方式工作的。我还能怎么做呢?

实际上有数百种方法可以将React视图层与基础模型连接起来。当涉及到模型时,React本身完全不依赖于实现


然而,有一些有趣的方法已经证明了自己

其中之一是Facebook的。它基于数据存储的思想,这些数据存储与React组件分开保存,而不直接依赖于它们。相反,对模型数据的更改是通过调度操作进行的(例如,用户登录,应用了筛选器),可以将其视为类似事件。然后,中央调度器将这些操作分派到不同的存储区

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


(来源:)

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

这既可以确保应用程序的各个部分保持可重用和可替换性,也可以确保应用程序的状态始终保持一致



然而,请注意,如上所述,这只是众多方法中的一种。不过,了解单向数据流和不可变数据结构背后的价值可能是一个很好的切入点,正是这些数据流和不可变数据结构使该模式如此强大。

这不是我一直在寻找的答案吗。谢谢我会在早上查看你的链接。我没想到这么快就能得到这样的答案。。呵呵
constructor(props) {
  super(props); 
  this.state = {
    model: this.props.model
  }
}