对React、Redux、React-Redux详细剖析

前言

相信不少新手朋友们对于React、Redux、React-Redux这三者之间的关系和区别确定有不少不解和疑惑。这里咱们就来详细的剖析一下它们吧。

React：负责组件的UI界面渲染；
Redux：数据处理中心；
React-Redux：链接组件和数据中心，也就是把React和Redux联系起来。

React

React主要就是用来实现UI界面的，是一个专一于view层的框架。对于一些小项目，若是数据的交互不是不少，彻底能够只使用React就能很好的实现。

在传统的页面开发模式中，须要屡次的操做DOM来进行页面的更新，咱们都知道对DOM的操做会形成极大的性能问题。而React的提出就是减小对DOM的操做来提高性能，也就是Virtual DOM。

Virtual DOM

Virtual DOM就至关于一个虚拟空间，React就是基于 Virtual DOM 来工做的。

它的工做过程是：当有数据须要进行更新时，会先计算 Virtual DOM ，并和上一次的 Virtual DOM 作对比，获得DOM结构的区别，而后只会将须要变化的部分批量的更新到真实的DOM上。

说到如何去计算Virtual DOM，在React里面，用到的是react-diff算法。咱们都知道传统的diff算法是经过循环递归对每一个节点进行依次对比，效率低下，算法复杂度达到了 O(n^3)，其中 n 是树中节点的总数。

根据react diff策略:

1. Web UI 中 DOM 节点跨层级的移动操做特别少，能够忽略不计;
2. 拥有相同类的两个组件将会生成类似的树形结构，拥有不一样类的两个组件将会生成不一样的树形结构;
3. 对于同一层级的一组子节点，它们能够经过惟一 id 进行区分。

React 分别对 tree diff、component diff 以及 element diff 进行了算法优化：

1. tree diff：对树进行分层比较，两棵树只会对同一层次的节点进行比较
2. component diff：

• 若是是同一类型的组件，按照原策略继续比较 virtual DOM tree。
• 若是不是，则将该组件判断为 dirty component，从而替换整个组件下的全部子节点。
• 对于同一类型的组件，有可能其 Virtual DOM 没有任何变化，若是可以确切的知道这点那能够节省大量的 diff 运算时间，所以 React 容许用户经过 shouldComponentUpdate() 来判断该组件是否须要进行 diff。

3. element diff：当节点处于同一层级时，React diff 提供了三种节点操做，分别为：插入、移动、删除。

这是整个react diff算法的比较流程图:

React生命周期

React总共有10个周期函数（render重复一次），这10个函数能够知足咱们全部对组件操做的需求，利用的好能够提升开发效率和组件性能。

1、组件在初始化时会触发5个钩子函数：

1. getDefaultProps()

设置默认的props，es6中用 static dufaultProps={} 设置组件的默认属性。在整个生命周期只执行一次。

2. getInitialState()

在使用es6的class语法时是没有这个钩子函数的，能够直接在constructor中定义this.state。此时能够访问this.props。

3. componentWillMount() ajax数据的拉取操做，定时器的启动。

组件初始化时调用，之后组件更新不调用，整个生命周期只调用一次，此时能够修改state。

4. render()

React最重要的步骤，建立虚拟dom，进行diff算法，更新dom树都在此进行。此时就不能更改state了。

5. componentDidMount() 动画的启动，输入框自动聚焦

组件渲染以后调用，能够经过this.getDOMNode()获取和操做dom节点，只调用一次。

2、在更新时也会触发5个钩子函数：

6. componentWillReceivePorps(nextProps)

组件初始化时不调用，组件接受新的props时调用。无论父组件传递给子组件的props有没有改变，都会触发。

7. shouldComponentUpdate(nextProps, nextState)

React性能优化很是重要的一环。组件接受新的state或者props时调用，咱们能够设置在此对比先后两个props和state是否相同，若是相同则返回false阻止更新，由于相同的属性状态必定会生成相同的dom树，这样就不须要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，尤为是在dom结构复杂的时候。不过调用this.forceUpdate会跳过此步骤。

8. componentWillUpdate(nextProps, nextState)

组件初始化时不调用，只有在组件将要更新时才调用，此时能够修改state

9. render()

很少说

10. componentDidUpdate()

组件初始化时不调用，组件更新完成后调用，此时能够获取dom节点。

3、卸载钩子函数

11. componentWillUnmount() 定时器的清除

组件将要卸载时调用，一些事件监听和定时器须要在此时清除。

Redux

Redux是一种架构模式，是由flux发展而来的。

Redux三大原则

1. 惟一数据源
2. 状态只读
3. 数据改变只能经过纯函数（reducer）完成

Redux核心api

Redux主要由三部分组成：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。
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。

connect

connect链接React组件和Redux store。connect其实是一个高阶函数，返回一个新的已与 Redux store 链接的组件类。

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)
复制代码

TodoList是 UI 组件，VisibleTodoList就是由 react-redux 经过connect方法自动生成的容器组件。

1. mapStateToProps：从Redux状态树中提取须要的部分做为props传递给当前的组件。
2. mapDispatchToProps：将须要绑定的响应事件（action）做为props传递到组件上。

Provider

Provider实现store的全局访问，将store传给每一个组件。

原理：使用React的context，context能够实现跨组件之间的传递。

总结

下图阐述了它们三者之间的工做流程：