React.js 有基本的 Flux 实现吗？

Posted 2023-02-22

【中文标题】React.js 有基本的 Flux 实现吗？

【英文标题】：Does React.js have a basic Flux implementation?

【发布时间】：2016-05-17 11:59:54

【问题描述】：

我是 React.js 的新手，我非常喜欢它。我在阅读 React.js 文档时遇到了 Flux 架构。我知道 Flux 只是一种模式，而且有很多 Flux 实现——包括 Facebook 自己的。我也知道 React.js 可以在没有任何 Flux 实现的情况下使用。

我的问题是：可以说 React.js 嵌入了自己的（小型）Flux 实现吗？在我看来，我认为 React.js 在没有自己的 Flux 实现的情况下没有其他方法可以实现其单向数据流——当然，可以用其他 Flux 实现替换。

【问题讨论】：

它没有——reactjs 只是一个渲染库。

【参考方案1】：

Flux 是处理应用程序状态的模式，React 只是视图库。您不必将 Flux 与 React 一起使用，但这是首选方式。

现在最流行的 Flux 实现似乎是 Redux。

【讨论】：

是的，我完全明白了。我基本上是从其他角度思考。在我看来，当我们在 React 组件上监听事件并添加动作处理程序并在这些动作处理程序中手动调用 setState 来更新相应的状态时，我们在某种程度上实现了非常有限的功能的Flux。虽然没有合适的Dispatchers、Stores，但我们的动作处理程序既可以监听变化，也可以更新组件的状态。我的思维方式可能不正确，但这就是我绘制事物的方式。

React 社区慢慢倾向于无状态组件，您考虑存储到 this.state 中的每个状态都应该由 Flux 存储来处理。

根据您的回答，我得出的结论是，React 与任何其他视图库一样，都有自己的应用程序状态管理方式。但是为了获得单向数据流的好处（默认情况下React 没有），我们需要使用一些Flux 实现，例如 Facbook 的 Flux、Redux、Reflux 等。我的理解正确吗？

感谢您的精彩回答和 cmets。我将您的答案标记为正确答案:-)。谢谢

【参考方案2】：

下图是对什么是反应，什么不是反应的解释：

绿色的东西 = React 的一部分：在 DOM（或其他地方）中呈现组件树的库。 单向流意味着做出反应/只允许自上而下的更新：任何组件都可以渲染/更新/更改自身（通过更改状态）或其子级（通过沿树向下传递道具）。 蓝色部分是通量模式的一部分。 React 没有任何代码/库组件。

flux 的元素使循环变得完整：它们允许 react 组件触发操作，进而更新存储，并且可以允许（顶部）组件根据存储的更改重新渲染。 有一些库（e.d. redux、reflow、alt）实现了通量架构的各种元素。