本文为稀土AdminJS技术社区首发签约文章,14天内禁止转载,14天后未获授权禁止转载,侵权必究!
又来给大家更文了,今天是微服务网关实战的第六篇。
今天的内容比较偏前端一点,主要是给大家换换口味,毕竟学一个东西学久了就想学点新东西休息一点,俗称换换脑子。
其实早就想学学前端看了,不过碍于工作繁忙,也可能是懒癌发作一直没有成行,直到在做OKR的时候有些东西需要前端的支持,而我们又没有多余前端的时候,我就知道,我需要开始学前端了~
在往下讲之前,我忽然想起来我有一位前端网友,在我们之前都还特贫穷的时候(现在升级到贫穷),时常会在一块讨论问题,有时候我会说你们前端怎么怎么样,他就会非常反感,因为他觉得自己不是 front 而是 developer。
虽然我被怼了,但是从心底我是同意他的说法的,开发者不应该给自己受限,我们大家都只是在做前端 or 后端这份工作而已,毕竟有的人招进来的时候是前端,现在连运维的活都干呢,你说是吧?@CookieBoty
所以,本文的内容会夹杂前端和后端,前端的可以看看后端内容,后端的可以看看前端内容,换换脑子嘛~
1. Vue
我还依稀记得,三四年前刚学 Java 的时候还要学 CSS、HTML和JS三板斧,做后端工作三年后,我连怎么操作 DOM 都忘记了,可能许多后端小伙伴也和我一样,除了会 HTML 的一点标签,其他前端相关的知识早就忘完了,这也是很多后端迟迟不愿意接触前端的原因,太费心力了。
所以在我决定开始学习前端的第一个问题就是,我应该先学什么?
在我略微思考了三分钟之后,我得出一个结论:我应该先学一个前端框架。
我知道任何一门语言的技术栈都是有一个庞大的生态在支撑的,前端所涉及的东西除了前端框架之外还有打包工具,依赖管理工具,ES6新特性(可能它已经老了,对我来说是新的),卷的狠的再来点拆入拆解浏览器等等等。
这些八股文和 Java 有的一拼,但是我知道我不需要学这些的所有东西,我要学的时候只有一个:用一个工具帮我做成一个东西。
所以,虽然我连解构赋值、和操作DOM都不会,但是这不妨碍我学前端,我要先选中一个前端框架进行熟悉,然后利用这个框架的生态帮我做东西。
扯远了,说回正题,在两三年前的时候,前端还是 Vue、React 和 Angular 三足鼎立,但是到今年 Angular 除了外企似乎已经用的不多了,所以我的学习目标就放在 Vue 和 React 这两个身上了。
怎么选,其实我是纠结的,最终我听从好大哥@CookieBoty和众多网友的建议,学了 Vue。
网上很多人都说 Vue 上手好、文档全,我感觉完美符合我的预期,再加上火影完结之后我就开始追海贼王了,尤大的 onepiece 起名方式甚合我意,所以我就开始学起来了 Vue3。
怎么学呢?我想到了程序员的梦工厂某课网,找了一个教程来看,上面先教了我模板语法,又教了我单页组件,最后又学了 Vue 路由系统,前后花费一个多小时,看了十几节视频,我觉得我行了,就开始实践了~
最终,三天没写完一个页面。
2. React
Vue3
的难度让我有点触不及防,可能也是因为我没有抛弃后端的代码习惯。
我习惯用 TS 定义好数据结构去接收值和处理值,但是我发现 Vue3 中的所有对象都是一个代理对象,当我尝试将一个 Map 数据直接转换为一个 JSON 字符串的时候我发现不行,我也无法理解一个 Map 为啥不能在转 JSON 的时候把里面的 KV 带上,还需要我手动转换成一个对象然后再转一次,我很苦恼。
我更苦恼的是,当我尝试用一个数组对象循环生成某段模板的时候,我发现很麻烦,我感觉这不是我想要的前端,作为一个后端,我学了脚本语言,但是它却让我感觉到很多的枷锁在身上,这比我写 Java 还困难。
此时我意识到,Vue3的上手难度和Vue2不是一样的,这是一个成熟的前端框架了,它需要一个成熟的前端来操作,而不是我这种玩完就扔的二流开发。
当然,Vue 还是有很多好处的,从我可以看见的一点来说就是,ele-plus 这个组件库是真的漂亮。
Vue3 玩不转了,我就想换 React 了,再次来到某课网,找了个 React17 的视频来看,又花了我一个多小时,好在我已经有一些前置知识了,吸收起来还是蛮快的,学习的过程中,我觉得 React 给了我想要的东西:自由,脚本语言写起来的自由感。
在 React 中我不再拘泥于单页组件,统统都是函数式组件,单向数据流也让我更容易理解数据运行的方式,而且会 React 据说B格要比会 Vue 的高一点,这一切都让我觉得转 React 是正确的。
不过有利有弊,在我写 React 的过程中,我发现我在用 Vue3 写代码时候的问题就是 JS 独有的问题,比如我前面提到过的 Map 转 JSON 的问题,它不会因为某个框架就能让我更舒服。
可能有的前端小伙伴会想:你为啥要用 Map?
因为 Map 更符合我这个后端的认知,某些不确定的多选参数我装在一个容器里面,然后序列化后给后端我觉得这是一件极其合理的事情,它符合我的心智模式,但是 JS 或者 TS 都没有做到。
在使用 TS 的过程中,我几乎没有感觉到好处,TS 的类型检查反而让我觉得更不像脚本语言了,这一点我觉得比后端 Kotlin 差很多。
虽然有种种限制,但是好在 React 这个框架并没有让我感觉到有什么不适,反而是无缝衔接,我几乎是上手就写了。
最后总结一下我 React 都学了哪些东西才开始写东西的:
- 使用脚手架安装 react with ts。
声明类组件和函数式组件
:函数式组件是主流,类组件稍微看看就行,主要就是写起来麻烦。理解 render
:render 其实就是通过执行组件代码生成一个HTML片段,然后挂载到DOM上面。CSS 模块化
:通过 CSS 模块化,加样式的时候会非常方便,懒癌患者直接在代码上加行内样式也没问题,玩的就是随心所欲。State 和 props
:state 是重点,它代表了组件中状态,比如按钮是否显示之类的,props 则是不可变参数,由外部传递进来供组件使用。Hooks
:Hooks 我一般只使用到 useState、useEffect、useContext这三个,它们分别代表了声明状态变量,声明副作用钩子和全局数据传递。路由
:按照我的理解路由是通过占位符和浏览器的锚点来完成的,通过锚点定位到指定代码,通过占位符将组件代码生成到占位符占据的DOM处,当然这只是个人拙见,希望评论区大佬能给出更多细节。
学完上面几项,我觉得你写一个小的管理系统也是没问题的,啊对了,说到管理系统,那必然要用到 http 相关的东西,虽然由 axios 珠玉在前,但是 fetch 用起来也还行。
最后,我觉得 React 的文档比 Vue 的文档强上不少,这句话希望 JYM 别喷我。
3. 组件库
写前端的过程中,想要提效,组件库是必不可少的,我先后体验了 Ant Design、Material UI、Semi Design、Arco Design。
最终在做项目的时候用了 Semi Design
,因为它不用引入全局样式表就能按需加载,虽然我的好大哥告诉我 Ant Design 也可以做到这个效果,但是当时确实没有实践成功,还是我的功力太过薄弱。
从目前看来,我用过最舒服最方便的还是 ele-plus 可惜没有 React 版本。
虽然组件库是一个好东西,但是我觉得太过依赖组件库是一件很糟糕的事情,当你要做的功能组件库中有但是恰好达不到你要的效果时,就会很难受,怪不得很多人都要做一个自己的组件库了~
比如 Semi Design,在我使用的过程中我其实很不喜欢它的按钮效果,按钮上面总要有一个底色:
我想要一个无底色的图标按钮,但是 Semi Design 的图标按钮全部都是这样的:
可能这就是它独有的设计风格问题吧,还有一些随时可能遇到会违反自己的直觉的事情,让我意识到,组件库虽然不错,但是过度依赖也为自己的扩展留下很多问题。
写到这,突然就明白了为啥前端有时候会告诉我:” 这个效果我用的组件库做不了 “,我心想你的页面还不是你做主吗,居然能让组件库把开发者给拿捏了,等我也被拿捏的时候,我仿佛理解了他当时的情况,原来我的页面真不是我做主
声明:本文仅供个人学习使用,来源于互联网,本文有改动,本文遵循[BY-NC-SA]协议, 如有侵犯您的权益,请联系本站,本站将在第一时间删除。谢谢你