react学习笔记一


  React来自Facebook,2013年诞生

  和Angular不同,react并不是一个完整的MVC/MVVM框架,它只专注于提供清晰、直接的view视图层解决方案。它的功能全部以构建组件视图为核心,并提供类似控制器的函数接口和生命周期函数。在React中没有控制器、没有服务、没有过滤器等等。

React非常轻,目标是minimal API interface,只提供组件化相关的非常少量的API。简化了一切可以简化的东西。比如说Angular中做一个组件,实际上叫做E级的指令,要写scope、link函数,但是react最大限度的简化了一个组件的开发,事实上react就是为了组件开发而诞生的。

  React可以搭配flux等架构(Redux实现)。有flux架构护航,数据的单向流动,自称是比MVC、MVVM更高级的一种模式。可以开发大型应用。

  React使用virtual DOM技术,使得它性能卓越,开销很小。

image.png

  Virtual DOM是react中的一个很重要的概念,在日常开发中,前端工程师们需要将后台的数据呈现到界面中,同时要能对用户的操作提供反馈,作用到UI上….这些都离不开DOM操作。但是我们知道,频繁的DOM操作会造成极大地资源浪费,也通常是性能瓶颈的原因。于是react引入了virtual DOM。Virtual DOM 的核心就是计算比较改变前后的DOM区别,然后用最少的DOM操作语句对DOM进行操作。

image.png

  现在需要将上图左边的DOM结构替换成右边的结构,这种情景在实战项目中是经常会遇到的,但是如果直接操作DOM的话,进行移除的话可能就是四次删除,五次插入吗,这种消耗是巨大的,但是使用Virtual DOM那就是比较两个结构的差异,发现仅仅改变了四次内容,一次插入。这种消耗就小很多,无非加上一个比较的时间。

  Virtual DOM使用了DIFF算法,DIFF算法是一个比较计算方法。主要用来计算DOM之间的差异。

  Virtual DOM技术,此时要删除3个节点,插入3个节点。使用virtual DOM技术仅仅需要移动节点即可。

  React 中使用了JSX语法糖,jsx=JavaScript+xml。Js文件中写html模板,代码语境不需要来回切换的。也就是说,在Angular中模板写在.html文件中。React中使用.js文件来当做html模板,语境是统一的,非常清晰简明。Jsx语法比``运算符还要简单,是最优雅的将html和js结合的方案。