一枚java后端的前端react学习之路

时间:2024-03-28 20:47:31

不懂前端的后端开发攻城狮,不是一个好后端!

我为什么要学习前端?前端又不是我的工作内容,学他能给我带来什么好处?很多时候经常听到有这样的声音,好像所有的新东西跟他们都没有关系一样,我一直认为不要把自己局限在一个小巷子里,每一个语言的存在都有他优秀的一面,并且现在前端发展生机勃勃,各种优秀的前端框架层出不穷, react, angularjs, vue都是目前最优秀的大前端框架,nodejs的出现更是完全颠覆了前端的认知,哦,原来JavaScript也可以用来服务端开发了,而自己对前端的认识还停留在jquery,感觉自己落后了好几个世纪,刚从农村出来一样。出于好奇和敬畏,去学习了下,并且在工作中主动承担了部分前端的工作(其实是一些边角料工作,前端不愿意做,没有kpi,但是对后端帮助很大的一些内部工具),给项目组带来了一些方便吧。

 

CSS + JavaScript基础语法

花了一天时间在w3cschool回顾了下css和JavaScript这些基本语法,说句实话我至今还是对样式这东西比较头疼,不怕学习js,就怕学习样式,调整个距离还行,美观性就算了,直男的审美标准不管直视,你问我css主要学了什么,不好意思请打开chrome的开发模式,按照这个图要调整你的样式,入个门先,后面有一些通用的前端组件库,给定了一些基础样式。

一枚java后端的前端react学习之路

ES6

这个必须要去学习的,ES6标准有很多的新特性,而且如果你是一名java程序员,你会觉得这个语法很亲切

箭头函数: 类比java8的lamba语法,学习无成本,用起来也是爽

协程: 作为一名优秀的后端开发,不开他几个线程读不好意思说自己是后端开发,然而不好意思,js是单线程的,未了弥补这个短板,出个协程,在单线程上的异步,yield , async

到这里我一度很迷惑ES6和JavaScript什么关系?这就牵扯到JavaScript的历史,有兴趣可以搜索下,可以理解他俩没啥区别,都是微软逼的

此处应该装个逼,来个ES6各浏览器兼容性吧,省的说我们外行,链接

一枚java后端的前端react学习之路

react入门

这简直是个噩梦的开始,但是熟练之后感觉爽的飞起!为啥不学习vue,16年时候vue没这么火啊,不是react就是angularjs,那肯定不能落后要学就学最火的,前公司用的也是react,那就它咯。

1. react的生命周期:你都学过spring的生命周期了,这个我觉得应该不难理解

一枚java后端的前端react学习之路

2. props和state: props不可变, state可变会触发组件渲染并且state值更新是异步的,异步的,异步的!

react全家桶学习

router: 

redux: 是负责组织 state 的工具,所有数据都存储在store中,唯一改变state的方法是触发action

npm

可以理解为是一个maven仓库

webpackage

打包工具,有点像maven打包工具

 

然后发现学了这么多,每次要整合一个工程这么复杂,要把react全家桶构建到一个工程每次都要做重复的事情,有没有类似springboot的工具啊,帮我构建好一个工程架子,我只想安静的写代码, dva

dva

这个牛逼了,跟springboot一样,把上面这些react、redux、router、saga、webpackage打包编译功能都封装好了,他的官网上有详细介绍这个项目的起源,借一张图理解。

一枚java后端的前端react学习之路

经过前面的学习主要还是要理解这么些个概念:

State: model数据状态(type State = any

Action:改变state的唯一途径,并且他只是描述了一个行为(type AsyncAction = any

Dispatch:触发action行为(type dispatch = (a: Action) => Action

Reducer:描述如何改变数据((state: S, action: A) => S

Effect:被称为副作用,最常见的就是异步操作,(redux-saga)

Subscription:从  获取数据的方法,数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。

Router

nodejs

基本上到这里前端的学习可以说也算是结束,一下属于兴趣扩展,nodejs把JavaScript从浏览器模式中解脱出来,使得js在非浏览器中也可以运行。并且nodejs IO是异步NIO,对IO密集型比较有优势,而且其V8虚拟机构造和jvm一样,有新生代、老年代,GC,YGC,看起来跟java没什么两样,所以也没什么学习成本,但是nodejs是个单进程的,这可能也是他在服务端使用的一个顾虑点吧。在公司很多后端不愿意学习nodejs,认为它是个前端范畴,而前端又对服务端性能优化这些吃不准,导致公司内部推广node很困难,没法取代springMVC

egg

跟springMVC一样,controller控制层,nodejs的框架,一直没机会在实际项目中使用,也只能是会使用了吧

 

前端组件库

Ant

飞冰

以上基本上是自己摸索的一些前端的学习过程,做个总结。最后:我真的是个java程序员