前端

React快速入门

文 / 大炳哥 来源 / 原创 阅读 / 1807 3年前

1. 概念介绍

React起源于Facebook的内部项目,因为该公司对市场上所有JavaScript MVC框架,都不满意,就决定自己写一个,用来架设他们自己的Instagram的网站。

做出来之后,返现这套东西很好用,在2013年5月开源了,目前已经成为了全世界范围内前端的三大主流框架之一,与之同样受欢迎的有angular.jsvue.js,在这三个框架中React属于最流行的框架。

2. React是什么

React适用于构建用户界面的JavaScript库,简单轻盈, 主要用于前端的渲染。单单一个React是不具备开发大型项目的,但是React的生态非常的好,围绕React的技术栈有很多,主要包括:React, redux, react-redux,react-route,…..如果想了解更多可以查看github。

React英文官方网站 React中文官方网站

3. React具备什么特点

  1. 使用JSX语法创建组件,实现组件化开发,为函数式的UI编程方式打开了大门
  2. 性能高:通过diff算法虚拟DOM实现视图的高效渲染和更新
  3. 使用起来的其他特点:
  4. 声明式
  5. 组件化
  6. 一次学习随处编写

4. React核心

1. 虚拟DOM

概念

React将DOM抽离为虚拟DOM,虚拟DOM其实就是一个对象来描述DOM,通过对比前后两个对象的差异,最终只把变化的部分重新渲染,提高渲染的效率

为什么用虚拟DOM

当DOM发生改变时需要遍历DOM对象的属性,而原生DOM可遍历属性多达200多个,在这200多个属性中可能需要重新渲染并不是很多,导致更新页面的代价太大。

所以使用虚拟DOM就可以实现局部更新的效果,从而提高渲染效率。

虚拟DOM的处理方式

用JS对象结构表示DOM树的结构,然后用这个树构建一个真正的DOM树,插入到文档当中。

当状态变更时,重新构造一棵新的JS对象树,然后使用新的树和旧的树作对比,记录两颗树的差异。

将记录的差异之处,重新渲染到文档中,从而实现文档的更新。

虚拟DOM:

  • 本质:使用js来模拟DOM元素和嵌套关系
  • 目的:为了实现页面元素的高效更新(按需更新)

2. Diff算法

作用

用于:最小化页面重绘

过程

当我们使用React在render()函数创建一棵React元素树,在下一个state或者props更新的时候,render()函数就会创建一棵新的React元素树。

React() 将对比这两棵树的不同之处,计算出如何高效的更新UI(只更新变化的地方,此处采用的就是diff算法)

实现按需更新,使用diff算法:

  • tree diff:新旧两颗DOM树,进行逐层对比的过程,就是Tree Diff, 当整个DOM逐层对比完毕,则所有按需被按新的元素,必然可以找到
  • component diff: 在进行Tree Diff的时候,每一层中,组件级别的对比,叫 Component Diff;
    • 如果对比前后,组件的类型相同,则暂时认为此组件不需要被更新
    • 如果对比前后,组件的类型不同,则需要移除旧组件,创建新组件,并追加到页面上
  • element diff: 在进行组件对比的时候,如果两个组件类型相同,则需要进行元素级别的对比,这叫做element diff

虚拟DOM和DIff算法是React的两大特性,相辅相成,缺一不可。一起完成了高效渲染,局部刷新的功能

2

评论

共0条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~

站点声明:本站转载作品版权归原作者及来源网站所有,原创内容作品版权归作者所有,任何内容转载、商业用途等均须联系原作者并注明来源。

© 2019 The Pride & Joy of an Artisan. · Designed By duoguyu · Powered By Django京ICP备19006898号-1
相关侵权、举报、投诉及建议等,请发E-mail:lemont0086@163.com

友情链接: 大炳哥的博客 逐梦个人博客 微微的博客 daixu 十年之约