如何在使用 Flux 时使 ReactJS 更好地发挥作用.docx

如何在使用Flux时使ReactJS更好地发挥作用
我很想知道为什么当React自身很好的情况下我们还需要Flux(whydoweneedFluxwhenReactisfineonitsown)。我在ReactJS方面没有太多的开发经验，这就是为什么我无法意识到Flux的作用。基于对学习的渴望，我告诉自己振作一点，学习Flux的同时也帮助培训他人。
作者：oschina来源：HYPERLINK"http://www.linuxeden.com/html/news/20161020/168593.html"\t"_blank"开源中国|2016-10-2113:08
HYPERLINK"javascript:favorBox('open');"\o"一键收藏，随时查看，分享好友！"\t"_self"收藏
HYPERLINK"javascript:;"分享
我最近开始学习ReactJS。有了HYPERLINK"https://facebook.github.io/react"GitHub上面这个很棒的文档让我觉得它很容易学习。我用ReactJS创建了一个示例应用，而且它工作得很好!
有了一些经验之后，我想先提一下它的两个要点：
HTML和Javascript在一个文件时会变得容易维护。
在组件驱动开发中，DOM拆分成组件可以使其可重用以及易测试。
然后我听说了ReactwithFlux，我很想知道HYPERLINK"http://blogs.quovantis.com/how-reactjs-is-even-more-powerful-if-you-use-flux/"为什么当React自身很好的情况下我们还需要Flux(HYPERLINK"http://blogs.quovantis.com/how-reactjs-is-even-more-powerful-if-you-use-flux/"whydoweneedFluxwhenReactisfineonitsown)。我在ReactJS方面没有太多的开发经验，这就是为什么我无法意识到Flux的作用。基于对学习的渴望，我告诉自己振作一点，学习Flux的同时也帮助培训他人。
用ReactJS创建一个应用，但最初并没有使用Flux，这样便于理解它的优势，比如：
可维护性
可读性
单向数据流
为了在实践中有一样的效果，我们来看看使用Flux和不使用Flux来创建应用程的区别。
让我们从了解Flux的基本定义/架构开始。
Flux框架

Flux有以下四个要点
Action(操作)：Actions非常简单，因为它们只需要从View接收请求并将其传递给Dispatcher。它充当的是View和Dispatcher之间的中介。
Dispatcher(调度):Dispatcher负责将信息传递给Store。它通过Dispatcher中的<this.dispatch>方法来完成工作。
Store(存储):Stores与数据一起工作。它根据每个来自View的请求与后端服务器通信。
View(视图):Views负责显示信息。如果视图需要信息就会从Store中获取，如果需要执行某些操作或者更新、添加某些信息则会告知Action。Action调用Dispatcher，Dispatcher反过来从Store获取数据。
假设要创建一个TODO应用。这是一个单页应用，分为以下几个组件：
Header
TodoCount
TodoForm
TodoList
TodoItem
在浏览器中，组件将如下图所示：

预期的特性
TodoCount显示所有TodoItem的数量。
TodoForm有一个输入框。
提交表单时，新的TodoItem会添加到TodoList，TodoCount也会相应地增加。
不使用Flux的应用
创建TodoItem类用于渲染单个的todoitem。它将从父组件接收todoitem的信息：
varTodoItem=React.createClass({
render:function(){
return(
<li>{this.props.user}-{this.props.task}</li>)
}
})
下面的组件是TodoList，它负责渲染所有的todoitems。这个组件通过props从父类获取“数据”。“this.props.data”是我们之前创建的用于迭代和调用TodoItem的一个列表。
varTodoList=React.createClass({
render:function(){
varTodoTasks=this.props.data.map(function(todoItem){
return(
<TodoItemuser={