React框架：1、React简介

声明：本教程不收取任何费用，欢迎转载，尊重作者劳动成果，不得用于商业用途，侵权必究！！！

目录

一、前言

二、简介

1、组件化

三、专注视图层

四、虚拟dom

1、传统dom更新

2、虚拟dom

五、函数式编程

---

一、前言

创业公司不好招人，前段时间因为自己创业需要，我们决定在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开发环境