完美

[学习|工作|博客|交流平台|完美起航]
 详情

react学习笔记一

时间:[2018-03-17 15:00:30] 作者:[ zyw327 ] 点击:[ 3519 ]

  React来自Facebook2013年诞生

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

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

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

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

image.png

  Virtual DOMreact中的一个很重要的概念,在日常开发中,前端工程师们需要将后台的数据呈现到界面中,同时要能对用户的操作提供反馈,作用到UI....这些都离不开DOM操作。但是我们知道,频繁的DOM操作会造成极大地资源浪费,也通常是性能瓶颈的原因。于是react引入了virtual DOMVirtual 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+xmlJs文件中写html模板,代码语境不需要来回切换的。也就是说,在Angular中模板写在.html文件中。React中使用.js文件来当做html模板,语境是统一的,非常清晰简明。Jsx语法比``运算符还要简单,是最优雅的将htmljs结合的方案。

 5   0
标签:  react virtual dom
 相关评论

zyw327

姓名:  
zyw327
QQ号码:  
327523057
职位:  
NODEJS
GITHUB主页:  
个性签名:  
宝剑锋从磨砺出,梅花香自苦寒来

关注     私信