reactjs - React + Flux - 应该将数据存储在组件状态还是 Prop 中？

Question

如果通量存储是维护数据状态的单例，为什么组件在访问存储时使用 setState 而不是 setProps？这不是意味着我开始将应用程序状态保存在两个(或更多)位置吗​​？

Flux/React 文档和示例似乎都指出 setState 作为首选解决方案，但我在工作中与一些同事进行了有趣的对话，并想知道是否还有其他人遇到过这个

编辑:你可以在这个网址中看到我在说什么: https://github.com/facebook/flux/blob/master/examples/flux-chat/js/components/ThreadSection.react.js

请注意 ThreadSection 是一个子组件，它直接从存储中获取数据并将其用作状态。

如果你遵循 React“方式”，我会期望状态由存储管理 - 而不是子组件。

我们想到的解决方案是获取顶级组件中的所有存储(作为 props)，并根据需要将它们传递给子组件。但这很快就会变得相当难看。

我们这样做是因为 setProps 不适用于子组件

Answer 1

了解您应该有两种组件。有状态组件和 View 组件。

有状态组件可以有 3 种状态:初始状态、用户输入状态和数据存储状态。

有状态组件就像您正在组装的“小部件”中的小入口点。对于下游依赖或数据注入(inject)来说，不再有单一的应用程序范围的入口点，因为所有这些小部件都有自己独立的生命周期。这就是为什么他们自己需要访问并听取商店的意见。

除了行为属性之外，有状态组件不通过上游属性接收实际数据。

有状态组件管理自己的状态并将其传递给其子组件以通过下游属性进行渲染。

有状态组件通常不会直接渲染 html DOM 元素本身。它们更像是 MVC 中的 Controller ，并使用其他更笨的组件(例如 MVC 中的 View )来实际渲染 DOM 元素。

Dumber 组件就像 View 一样，因此它们只包含渲染 DOM 元素的逻辑。将它们视为仅接收属性的 handlebars.js 模板，并简单地将它们渲染到可能带有循环等的 DOM 元素中。它们是无状态渲染器。

希望这能回答您的问题。