React：负责组件的UI界面渲染；
Redux：数据处理中心；
React-Redux：连接组件和数据中心，也就是把React和Redux联系起来。
React
React主要就是用来实现UI界面的，是一个专注与view层的框架。对于一些小项目，如果数据的交互不是很多，完全可以只使用React就能很好的实现。
在传统的页面开发模式中，需要多次的操作DOM来进行页面更新，而DOM操作会造成页面的性能问题。React可以通过Virtual DOM来减少对DOM的操作来提示性能。
Virtual DOM
当有数据需要更新时，会先计算Virtual DOM ，并和上一次的Virtual DOM做对比，只会将需要变化的部分批量的更新到真实DOM上。
根据react diff策略：
- Web UI中的DOM节点跨层级的移动操作特别少，可以忽略不计（尽量避免）；对树进行分层比较，两棵树只会对同一层级的节点进行比较；
- 拥有相同类型的两个组件将会形成相似的树形结构，反之亦然；不是同一类型的组件，将替换整个组件下的所有子节点；
-
对于同一层级的一组子节点，它们可以通过唯一id进行区分。
React
diff算法流程
React生命周期
redux
Redux是一种架构模式，是由flux发展而来的。
Redux三大原则：
- 唯一数据源
- 状态制度
- 改变数据只能通过纯函数完成
核心api：store，reducer，action
store
Redux的核心是store，它由Redux提供的 createStore(reducer， defaultState) 这个方法生成，生成三个方法，getState(),dispatch(),subscrible()。
- getState()：存储的数据，状态树；
- dispatch(action)：分发action，并返回一个action，这是唯一能改变store中数据的方式；
- subscrible(listener)：注册一个监听者，store发生变化的时候被调用。
reducer
reducer是一个纯函数，它根据previousState和action计算出新的state。指定了应用状态的变化如何响应action并发送到store的。
reducer(previousState,action)
action
action本质上是一个JavaScript对象，其中必须包含一个type字段来表示将要执行的动作，其他的字段都可以根据需求来自定义。数据的唯一来源，描述了有事情发生这一事实。
const ADD_TODO = 'ADD_TODO'
{
type: ADD_TODO,
text: 'Build my first Redux app'
}
React-Redux
Redux 本身和React没有关系，只是数据处理中心，是React-Redux让他们联系在一起。
React-rRedux提供两个方法：connect和Provider。
connext
connect连接React组件和Redux store。connect实际上是一个高阶函数，返回一个新的已与 Redux store 连接的组件类。
const VisibleTodoList = connect(
mapStateToProps,
mapDispatchToProps
)(TodoList)
-
mapStateToProps：从Redux状态树中提取需要的部分作为props传递给当前的组件。 -
mapDispatchToProps：将需要绑定的响应事件（action）作为props传递到组件上。
Provider
Provider实现store的全局访问，将store传给每个组件。
