前端学习阶段总结

概述

最近这段时间学习了下前端，但是没有机会去在项目中练练手，就先把所学到的东西整理总结一下，以后回过头来可以再复习。

这些是目前比较流行的前端框架，它们组合起来提供一种常用的解决方案。学习的框架包括以下集中：

• React
• Redux
• Redux-saga
• React-router
• dva

浅析组件

React

这个是非常基础的框架，其他的几个框架都是基于它或者补充它的能力。它的主要功能包括：

• 支持JSX，html和js的融合
• 修改组件内的State，React会自动实现视图的自动刷新
• 视图和状态的分离

以我的理解，它存在的最大问题是state在组件间的传递，目前只能通过props传递。state只能在组件的共同祖先组件上，组件内使用传入的props更新内部state，然后触发React的视图更新。

React-router

使用React的一般都是单页应用，在单页应用中也支持不同的url地址(/home/, /about等)，react-router 就是为了解决这个问题而生的，它通过提供一些标签实现url地址与视图的映射关系，根据url地址获取层级的视图组件，然后组合起来渲染。

目前对这个组件的学习比较粗，后续使用的话再细细研究。

Redux

Redux就是为了解决上面的这个问题，将整个应用的state维护在一个全局store中，然后只能通过action才能触发修改state。它支持middleware，支持拦截action，类似于Spring的AOP机制。

middleware中比较出名的就是redux-saga，使用Generator实现AJAX异步调用。(话说AJAX其实就是异步调用的意思，我也是醉了)

react-redux

将React和Redux绑定到一起的组件就是react-redux。

它提供了 ** Provider ** 标签，将该标签放在最外层，作为所有视图组件的父组件。我理解这里的实现方式就是将state全部维护在root组件内。

另外它提供了connect函数，这个函数非常重要，我花了很长时间才搞清楚这个函数的参数意义。它提供了多个参数，我重点关注前两个参数，这两个参数都是函数指针。

1. 第一个参数支持将state映射为props，它是为了将root组件中的state映射为props传递给组件。
2. 第二个参数是支持将创建action的函数映射为props，用于button的click回调函数、表单提交的回调函数等等。在这个回调函数中可以使用redux的dispatch函数，提交action来更新state store。

redux-sagas

这个是redux的middleware组件，它可以实现AJAX异步请求。redux middleware会拦击提交的action，redux-sagas通过监听拦截相应的action type，执行自定义的Generator函数（function *fn() ）。这个是ES6的新特性，该函数内使用yield返回迭代器，实现多个操作的编排执行。

dva

这个是支付宝团队开源的框架，它糅合了react、redux、redux-saga等框架，使用 ** 约定优于配置 ** 的设计原则，大大简化了上述组件的使用/学习成本。

其中的约定包含：

1. namespace的值作为state中的key
2. action type作为reducer的函数名

其他

JQuery库之前有粗略地看过，它主要是对document DOM操作的封装，$是它的入口，也是JQuery类的别称。

总结

大概的总结就是这样了，在脑子里把近期学到的前端知识又过了一遍，非常好！后面有机会要在工作中实战一下，才能领会的更好！

参考文档

• redux-saga: https://redux-saga-in-chinese.js.org/docs/introduction/BeginnerTutorial.html
• dva: https://dvajs.com/guide
• redux: http://cn.redux.js.org/
• react-redux: https://react-redux.js.org/introduction/basic-tutorial
• react 官方文档