Question

也许在官方的网站上，我看到一个视频是导师说的话：

只有顶级React视图才能了解商店。都不是顶级的视图应该转储并接收所有信息作为属性。

问题： 是吗？你的论证，请

但是，假设您有一些在多个页面上重复使用的小型React视图Button.react。并且假设Button.react必须知道一些商店数据。如果我们不直接从Button.react获取所有数据，我们会在每个重用Button.react的顶级组件中获得重复的代码。 你还好吗？

Answer 1

我希望我理解你的问题。

React的一个特征是它的单向数据流。每个组件都可以被另一个组件使用，就像一个函数可以调用另一个函数一样。就像一个函数一样，React组件通常应该能够从传递给它的参数中获取所需的所有信息（渲染本身）。这是React中props的功能。使用Flux时，有时React组件（通常位于视图层次结构顶部附近）实际从存储中获取数据以通过应用程序传递，称为Controller-Views。

每个组件都不能成为一个Controller-View，直接从商店获得自己的状态，这不是一个可强制执行的规则，但这是一个通用的做法。考虑两个功能：

function renderToggleButton( isSelected ){
  //... render the button
}

VS

function renderToggleButton(){
  var isSelected = StateStore.getButtonSelectedState( id );
  //... render the button
}

我认为你会同意第二个功能更复杂，更难以测试。它必须知道它从哪里获得它的初始条件。它还必须知道如何在应用程序的上下文中标识自己。这些功能应该不必知道。

现在想象一个充满这样功能的应用程序。如果一个功能行为不端，则很难追踪其输入;在受控条件下测试它。我希望澄清通过应用程序将数据作为props传递的指导。

Flux：顶级视图不应该是“转储”（不要从商店获取数据）

1 个答案: