为社区建设略尽绵薄之力!参与 2021 社区问卷调查!
此站点不再更新。了解新站点的更多信息!

Flux:一个用于 React 的应用架构

May 06, 2014 by Bill Fisher and Jing Chen

此博客已经归档。访问 zh-hans.react.dev/blog 查看最新的文章。

我们最近在 F8 大会(Facebook 于 2014.4.30 召开的开发者大会)的一个分组会议上交流了 Flux,一个与 React 配合的很好的数据流架构。在这里可查看视频:

总而言之,Flux 很适合我们,因为单向数据流模式可以使一个项目在日益复杂时变的更容易理解和维护。我们发现双向数据绑定会使得级联更新,无论在哪修改其中一个数据模型会导致另一个数据模型也更新,因此很难预测单个用户交互时会导致什么变化。

在 Flux 中,Dispatcher 是单例的,它指向数据流并保证更新时不会级联更新。随着应用扩大,Dispatcher 越来越重要,因为它可以通过特定顺序调用注册的回调来管理 store 之间的依赖关系。

当用户在 React 视图中产生交互时,视图会发送一个 action(通常是一些带有字段属性的 JavaScript 对象)传至 dispatcher 中,dispatcher 会通知 store 保存应用数据和处理业务逻辑。当 store 修改完了 state 数据,它们会通知视图组件已经更新。这种模式与 React 的声明式配合的很好,它允许 store 发送数据更新而无需关注视图和数据之间是如何转换更新的。

Flux 更像是一种模式,而不是一个常规的框架,所以你可以在不添加大量新代码的情况下立即使用 Flux。这里提供了一个 架构的示例 ,同时还有 更详细的文档教程 ,可以在文档中查看更多的示例。

Is this page useful?编辑此页面