Flux体系结构中的控制器视图是什么



我经常看到Flux架构和React项目中提到这个术语。

据我所知,这是一种设计模式,但我在网上找不到很好的描述。

"控制器视图"的概念一开始就让我感到偏移。

我能找到的最好的"定义"就在那里:https://facebook.github.io/flux/docs/todo-list.html#listening-更改-使用控制器视图

我们需要靠近组件层次结构顶部的React组件来侦听存储中的更改。在一个更大的应用程序中,我们会有更多这样的监听组件,也许页面的每个部分都有一个。在Facebook的广告创建工具中,我们有许多类似控制器的视图,每个视图都管理UI的特定部分。

我们的解释是,一旦你有了一个大的组件层次结构,你就不希望每个组件都能听到可能影响它的每一个变化。相反,你可以选择一个顶部/父组件,它会听到变化,然后通过道具将变化的值传播给它的子组件。这些子对象将根据道具更改的需要重新渲染。顶部组件成为层次结构的"控制器"。

控制器视图也让我感到困惑。毫无疑问,这有助于解释反作用设计。但它假设读者知道/熟悉MVC设计模式(我不知道,因此让我更加困惑)。

"控制器视图"旨在传达React组件实际上既是MVC模型视图控制器行话中定义的"控制器"又是"视图",其中:

  • 模型是您保存、构建和管理数据的地方
  • 视图是可见UI组件(HTML等)的树
  • 控制器在视图和模型之间进行中介,方法是从模型中获取数据并将其传递给视图,以及侦听视图中的用户输入并将其传给模型

在react中,组件不仅充当控制器,还定义视图的结构(渲染中组件的结构+组件树的结构)。

如果您还将flux与react一起使用:flux存储相当于MVC中的模型。

最新更新