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生命周期

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传给每个组件。

原理：使用React的context，context可以实现跨组件之间的传递。 三者之间的工作流程