React起源于Facebook的内部项目,因为该公司对市场上所有JavaScript MVC框架,都不满意,就决定自己写一个,用来架设他们自己的Instagram的网站。
做出来之后,返现这套东西很好用,在2013年5月开源了,目前已经成为了全世界范围内前端的三大主流框架之一,与之同样受欢迎的有angular.js
、vue.js
,在这三个框架中React属于最流行的框架。
React适用于构建用户界面的JavaScript库,简单轻盈, 主要用于前端的渲染。单单一个React是不具备开发大型项目的,但是React的生态非常的好,围绕React的技术栈有很多,主要包括:React
, redux
, react-redux
,react-route
,…..如果想了解更多可以查看github。
diff算法
和虚拟DOM
实现视图的高效渲染和更新概念
React将DOM抽离为虚拟DOM,虚拟DOM其实就是一个对象来描述DOM,通过对比前后两个对象的差异,最终只把变化的部分重新渲染,提高渲染的效率
为什么用虚拟DOM
当DOM发生改变时需要遍历DOM对象的属性,而原生DOM可遍历属性多达200多个,在这200多个属性中可能需要重新渲染并不是很多,导致更新页面的代价太大。
所以使用虚拟DOM就可以实现局部更新的效果,从而提高渲染效率。
虚拟DOM的处理方式
用JS对象结构表示DOM树的结构,然后用这个树构建一个真正的DOM树,插入到文档当中。
当状态变更时,重新构造一棵新的JS对象树,然后使用新的树和旧的树作对比,记录两颗树的差异。
将记录的差异之处,重新渲染到文档中,从而实现文档的更新。
虚拟DOM:
- 本质:使用js来模拟DOM元素和嵌套关系
- 目的:为了实现页面元素的高效更新(按需更新)
作用
用于:最小化页面重绘
过程
当我们使用React在render()函数创建一棵React元素树,在下一个state或者props更新的时候,render()函数就会创建一棵新的React元素树。
React() 将对比这两棵树的不同之处,计算出如何高效的更新UI(只更新变化的地方,此处采用的就是diff算法)
实现按需更新,使用diff算法:
虚拟DOM和DIff算法是React的两大特性,相辅相成,缺一不可。一起完成了高效渲染,局部刷新的功能
2