diff --git a/content/blog/2014-05-06-flux.md b/content/blog/2014-05-06-flux.md index 149c7d5fcb..1be2301e52 100644 --- a/content/blog/2014-05-06-flux.md +++ b/content/blog/2014-05-06-flux.md @@ -1,16 +1,16 @@ --- -title: "Flux: An Application Architecture for React" +title: "Flux：一个用于 React 的应用架构" author: [fisherwebdev, jingc] --- -We recently spoke at one of f8's breakout session about Flux, a data flow architecture that works well with React. Check out the video here: +我们最近在 F8 大会（Facebook 于 2014.4.30 召开的开发者大会）的一个分组会议上交流了 Flux，一个与 React 配合的很好的数据流架构。在这里可查看视频：
-To summarize, Flux works well for us because the single directional data flow makes it easy to understand and modify an application as it becomes more complicated. We found that two-way data bindings lead to cascading updates, where changing one data model led to another data model updating, making it very difficult to predict what would change as the result of a single user interaction. +总而言之，Flux 很适合我们，因为单向数据流模式可以使一个项目在日益复杂时变的更容易理解和维护。我们发现双向数据绑定会使得级联更新，无论在哪修改其中一个数据模型会导致另一个数据模型也更新，因此很难预测单个用户交互时会导致什么变化。 -In Flux, the Dispatcher is a singleton that directs the flow of data and ensures that updates do not cascade. As an application grows, the Dispatcher becomes more vital, as it can also manage dependencies between stores by invoking the registered callbacks in a specific order. +在 Flux 中，Dispatcher 是单例的，它指向数据流并保证更新时不会级联更新。随着应用扩大，Dispatcher 越来越重要，因为它可以通过特定顺序调用注册的回调来管理 store 之间的依赖关系。 -When a user interacts with a React view, the view sends an action (usually represented as a JavaScript object with some fields) through the dispatcher, which notifies the various stores that hold the application's data and business logic. When the stores change state, they notify the views that something has updated. This works especially well with React's declarative model, which allows the stores to send updates without specifying how to transition views between states. +当用户在 React 视图中产生交互时，视图会发送一个 action（通常是一些带有字段属性的 JavaScript 对象）传至 dispatcher 中，dispatcher 会通知 store 保存应用数据和处理业务逻辑。当 store 修改完了 state 数据，它们会通知视图组件已经更新。这种模式与 React 的声明式配合的很好，它允许 store 发送数据更新而无需关注视图和数据之间是如何转换更新的。 -Flux is more of a pattern than a formal framework, so you can start using Flux immediately without a lot of new code. An [example of this architecture](https://github.com/facebook/flux/tree/master/examples/flux-todomvc) is available, along with more [detailed documentation](https://facebook.github.io/flux/docs/overview.html) and a [tutorial](https://github.com/facebook/flux/tree/main/examples/flux-todomvc). Look for more examples to come in the future. +Flux 更像是一种模式，而不是一个常规的框架，所以你可以在不添加大量新代码的情况下立即使用 Flux。这里提供了一个 [架构的示例](https://github.com/facebook/flux/tree/master/examples/flux-todomvc) ，同时还有 [更详细的文档](https://facebook.github.io/flux/docs/overview.html) 和 [教程](https://facebook.github.io/flux/docs/todo-list.html) ，可以在文档中查看更多的示例。