声明:本教程不收取任何费用,欢迎转载,尊重作者劳动成果,不得用于商业用途,侵权必究!!!
目录
一、前言
创业公司不好招人,前段时间因为自己创业需要,我们决定在Vue、React、Angular中选一款框架先自己研究一下,
因为本人java、android开发出身,根据自己多年的经验:Android较多的是WebView调用前端代码、还有自己在联想做的一个Android+ Cordova+ vue / Sencha Touch(第一个基于HTML5的Mobile App框架)的项目等等
上学那会学过javaEE服务器开发像 html+css+js、ajax、jQuery、Mybatis、ssh 框架等都有学过,而又React较其他二个框架更偏向于移动端,
临时决定让我研究一下React,所以过了一遍以前前端的基础笔记、学习了一下React,在此做个记录吧!在学习一项新技术我一般这么做:
1、去找一个学习流程图。
2、学习基础,如:变量怎么定义、条件语句、循环语句、值怎么传递等,其实其他技术都是这样的套路开始。
3、然后根据流程图着重去研究某一块,到时候项目需要那块就去研究,这样你会用了。
4、进阶的话就是要多采坑、多做项目、多总结,这时候你遇到项目快速会用、做的东西更稳定
5、高级的话经验丰富了,就会想为什么这么实现?
就会去了解背后原理怎么实现的!因为他们遇到项目需要搭建框架、技术选型、保证性能等。
好了其他不多说了,这个是花了一段时间找资料、找学习视频研究了一下的笔记整理!
二、简介
对于前端来讲,最浪费性能的就是DOM操作,虚拟DOM帮我们减少了操作的次数,从而使我们提高了性能。
JSX是一个非常创造性的语法,它相当于允许在JS里面直接写html代码,而不像过去需要通过字符串拼接出来。
1、组件化
它把所有功能模块、UI等抽象成一个个单独的组件,在进行页面制作只需要把n个组件进行排列组合,就能够制作我们需要的页面效果。
数据流的流动方向是固定的,都是从父到子、从上到下的方向,这样使我们的整个代码逻辑比较清晰,方便我们阅读理解以及将来的维护。
三、专注视图层
四、虚拟dom
1、传统dom更新
2、虚拟dom
相当于JS代码和真实DOM之间加了一个虚拟DOM,那么我们的JS想要操作DOM的时候怎么操作?
它并不是直接操作DOM,而是操作跟真实DOM一样的JS变量,那么这个JS变量它跟真实DOM树的树形结构是一模一样的,
但是它的本质是一个JS变量,那么我们代码去操作虚拟DOM,虚拟DOM由于它是JS变量,所以操作效率是非常高的。
那么我们的App可以n次操作虚拟DOM,然后由虚拟DOM一次性反应到我们的真实DOM里面,
那么这样我们就把过去n次真实DOM的操作,缩减为1次,从而尽大可能的提高了我们页面的呈现效率,避免了性能的浪费。
五、函数式编程
请别只做拿来主义者,如果觉得写的不错、对你有用,留下你的足迹:点赞 或 评论 支持下!
一直被模仿从未被超越,你们的支持是我们这些写博客博主们的动力!我们将继续分享干货!
下一篇文章:React框架:2、搭建React开发环境