[React]学习笔记-一个阶段总结

前言

本来写了挺多字的了，结果电脑一休眠，就没保存，以后要挣钱买个MBP。

从7月底到现在，断断续续学了一段时间的react，做个阶段性的笔记方便回顾，以后回来炒冷饭。

7月底是领导给的一个任务，要把公司现有的系统都做前后端分离，从react和vue中选一个合适的框架，重构现有的前端代码，需要从头搭建一个开发的脚手架项目，之前完全没有接触过前端的东西，而这些年前端的百花齐放，加大了这次任务的难度，但是没什么办法，干就是了。

公司现有的项目都是一体化的，后端独立一个web项目，放JSP和JS，以及一些静态的HTML和CSS文件，历史久远，在改成HTML5的过程中，发现太多问题，跨域，JS引入，要完全改成H5，工作量大且维护性不好，所以反正要重写，不如找个新的JS框架来重写现有的系统。

主要困难有：

1. JS代码量激增：原来的页面是通过后台JSP，把数据渲染到JSP页面，然后传递给前端，改造成HTML5之后，所有数据都需要通过Ajax请求后端数据，通过jquery选择器，添加到HTML中，代码耦合度极高，JS代码量大量增加。
2. Ajax回调地狱：异步请求的数据，需要通过回调函数才能正常渲染到页面的指定位置，页面逻辑一旦复杂，会陷入回调地狱，导致各种undefined出现。
3. 样式杂乱：原项目是基于部分easyui和部分原生JS进行样式书写，在改造成H5之后如果沿用原来的样式，出现了很多样式问题，而且每个页面的出现的问题不一致，每个页面都有样式要调整，增加了很大工作量。
4. 框架定制：由于引入了token验证机制(分布式移除了session)，使用到easyui的表单或者jquery的表单提交的封装函数，都要进行定制，不具备比较好的维护性。
5. 优化问题：如果都使用原生的JS和Jquery库，当前的改造项目，会存在优化难度大的问题，数据展示很慢，定位难度高，用户侧体验不好，如果要用到APP平台，又要重新调整一遍样式。

能供选择的主要有3个框架，angular、react和vue，angular由于公司资源的问题，不在考虑范围内，最终选择了react作为重构的框架选择，主要考虑以下几点：

1. 公司的页面简单，但是逻辑复杂，有些很变态的需求，react在这方面比较灵活，能做到定制
2. 项目主要都是web端的，移动端有react-native适配
3. 生态问题，基本的需求已经可以在很多实现方案中找到
4. 有现成的阿里antd框架，可以节省很大一部分UI的工作，而且更新频率很高

弊端也是有的，最突出的就是react的学习成本不是一般的高，我也是断断续续学了两个月才能写一些简单的页面了，智商低，没办法，还有一个比较突出的问题，就是react的更新太大，很容易跟不上，以前的一些语法有可能直接被抛弃，这点也是不太好的。

编程的世界里没有银弹，只有慢慢演进，所以就这么写起来。

简单的总结

1. 前端的发展背景需要了解一下
2. node环境直接安装就好，不要花费太多时间
3. 了解几个常用的npm命令即可，cnpm配置会节省你很多时间，能直接上手yarn是最好的
4. react的基础，最好的入门教程就是官方的教程，react的组件的3种写法都要了解一下，着重注意不变的state和可变的props，组件之间的值传递
5. 跟着create-react-app完成官网的demo
6. es6的语法不用太较真，主要是箭头函数，模板语法，和class定义这三个要注意，其他的可以慢慢在项目编写的过程中补充
7. react-router的3.x版本和4.x版本都要了解一下，因为4.x的变动太大，同理，最好的入门教程依然是官方git的readme
8. redux，redux-log，redux-saga，分别是状态管理，日志中间件，异步中间件，有空再抽时间去了解redux-thunk
9. dva和umi，这两个都是react/redux/redux-sage的封装，会让你更容易上手写一个项目，前提，注意前提是基础都已经打好，没有的话，不建议直接上手就用这两个框架。要明白，只用react/react-redux/react-router-dom也是可以写项目的，不需要用到dva或者umi这些更高级的框架
10. css预编译器，学less即可，怎么书写一个less文件，怎么使项目支持less文件
11. babel转换器，了解一下怎么用，会用就行
12. webpack，打包工具，了解怎么配置
13. HMR，热加载，了解一下配置
14. Mock，了解Mock的基本语法，怎么造数据，或者可以直接使用第三方工具比如easy-mock
15. eslint，代码检查工具，了解配置即可
16. axios和fetch，用于发起ajax请求，建议axios，很好解决跨域问题
17. antd，支付宝的UI框架，慕课网上有一套视频可以参考，有各种UI组件的编写方式，讲解啰嗦点，但是质量还可以
18. 调试工具，react-developer-tools和redux-devtools
19. IDE用哪个，喜欢哪个就用哪个，webstorm和vscode都可以，vim也可以
20. 自备一个梯子，谷歌云+SSR
21. 不用每一个工具都学得深入，比如说react基础，如果你要研究到源码再来开始redux，那么到你开发业务的时候，不知道猴年马月了，一定要先是为了money而coding，之后才有时间想其他的
22. 在保证完成业务代码的前提下，多思考一些实现方式，为什么可以达成这样的效果，对学习底层有帮助，不要只做一个只会用工具的码农

调研部分

前端背景了解

这里看的是阮一峰老师的一个基础教程，不需要看完，看第一节即可

https://github.com/ruanyf/jstraining

备注：任何人说的都不一定是全对的，阮一峰老师的一些文章有的也是错的，所以仅供参考就可以，关键还是要自己思考，读书不思考，跟没读一样，阅读博客也是

基础环境安装

node

npm

cnpm

yarn

React基础

官网教程

https://reactjs.org/

create-react-app脚手架

一些问题：

什么是组件化？为什么要组件化

怎么使用一个组件？

state和setState，props

函数作用域问题，3种写法，构造方法中bind(this)，引用处bind(this)，或者es箭头函数写法

组件之间传递参数和方法？

7个生命周期函数

高阶组件是怎么写的？很重要，是学习之后的框架的基础

react-route-dom，怎么做路由的定义和跳转

学完上面这些问题，基本上就可以尝试自己开发一个简单的项目了，可供参考的有：

https://blog.csdn.net/awaw00/article/category/6692955

Redux

同样参考官网教程

https://github.com/reduxjs/redux

一些问题：

什么是redux，解决了什么问题？什么是状态容器，可不可以不使用redux，有没有其他替代方案

action和reducer的定义方法，dispatch

react-redux怎么使用，Provider顶级组件，connect()高阶函数

怎么组合reducer，combindReducers

mapStateToProps和mapDispatchToProps

redux中间件，比如日志redux-logger和redux-thunk(有时间了解)，和redux-saga

Antd

同理继续参考官网

https://ant.design/index-cn

一些问题：

从布局入手，必须会栅格系统

尝试在create-react-app搭建的脚手架项目中实现一些基本的UI组件，比如卡片，按钮，弹窗，表单，登录页，注册页，表格等

尝试去思考如何定制主题颜色等高级配置

如何在此基础上封装一个更高级的组件配置，比如分页，表格，不需要每个页面都去维护一个同样类型的表格

DVA

参考官网

分1.0和2.0版本，变动较大

https://dvajs.com/

dva的封装就更高层了，引入了生成器，把异步调用变成了同步调用（形式上）

一些问题：

我可以不用DVA吗？

router怎么定义和使用？

model，service，component，开发顺序？

effect，subscription，reducer都是什么意思，我应该把什么样的功能写入到其中哪个？

怎么封装自己的axios，而不使用fetch

页面怎么dispatch一个action？子页面呢？

一些复杂的SPA怎么开发？

暂时就写这么多，继续写代码了，比较细的demo和笔记都放在

https://github.com/copywang/learnReact