浅谈从React渲染流程分析Diff算法


Posted in Javascript onSeptember 08, 2018

React中最神奇的部分莫过于虚拟DOM,以及其高效的Diff算法。这让我们可以无需担心性能问题而”毫无顾忌”的随时“刷新”整个页面,由虚拟DOM来确保只对界面上真正变化的部分进行实际的DOM操作。React在这一部分已经做到足够透明,在实际开发中我们基本无需关心虚拟DOM是如何运作的。然而,理解其运行机制不仅有助于更好的理解React组件的生命周期,而且对于进一步优化React程序也会有很大帮助。

1、什么是虚拟DOM

在React中,render执行的结果得到的并不是真正的DOM节点,结果仅仅是轻量级的JavaScript对象,我们称之为virtual DOM。

简单的说,其实所谓的virtual DOM就是JavaScript对象到Html DOM节点的映射;即使用JavaScript对象将Html结构表示出来,而这个对象就是virtual DOM。

eg:

Html:

<ul id='list'>
 <li class='item'>Item 1</li>
 <li class='item'>Item 2</li>
</ul>

JavaScript对象表示(virtual DOM)

{
 tagName: 'ul',
 props: {
 id: 'list'
 },
 children: [
 {tagName: 'li', props: {class: 'item'}, children: ["Item 1"]},
 {tagName: 'li', props: {class: 'item'}, children: ["Item 2"]},
 ]
}

2、什么时候会生成到virtual DOM

React生命周期拥有装载、更新、卸载的三个阶段;附上一张React生命周期图

浅谈从React渲染流程分析Diff算法

前面提到:render执行的结果得到的并不是真正的DOM节点,结果仅仅是轻量级的JavaScript对象,即在render函数调用时将会创建出虚拟DOM;

class Tab extends React.Component {
 render() {
 React.createElement(
  'p',
  { className: 'class'},
  'Hello React'
 )
 }
}

浅谈从React渲染流程分析Diff算法

通过React.createElemen创建出虚拟DOM,而该函数只在Render函数中调用,所以在React装载和更新的过程中才会有虚拟DOM的生成;至于挂载到真实DOM自然而然是ReactDom.render函数啦。

3、virtual DOM如何实现

实现其实很简单,主要是定义一个函数并把我们传进去的参数组成一个React元素对象,而type就是我们传进去的组件类型,可以是一个类、函数或字符串(如'div')

React大致源码:

function createElement(type, config, children) {
 let propName;

 const props = {};

 let key = null;
 let ref = null;
 let self = null;
 let source = null;

 if (config != null) {
 if (hasValidRef(config)) {
 // 如果有ref,将它取出来
 ref = config.ref;
 }
 if (hasValidKey(config)) {
 // 如果有key,将它取出来
 key = '' + config.key;
 }

 self = config.__self === undefined ? null : config.__self;
 source = config.__source === undefined ? null : config.__source;
 
 for (propName in config) {
 if (
 hasOwnProperty.call(config, propName) &&
 !RESERVED_PROPS.hasOwnProperty(propName)
 ) {
 // 将除ref,key等这些特殊的属性放到新的props对象里
 props[propName] = config[propName];
 }
 }
 }

 // 获取子元素
 const childrenLength = arguments.length - 2;
 if (childrenLength === 1) {
 props.children = children;
 } else if (childrenLength > 1) {
 const childArray = Array(childrenLength);
 for (let i = 0; i < childrenLength; i++) {
 childArray[i] = arguments[i + 2];
 }
 props.children = childArray;
 }

 // 添加默认props
 if (type && type.defaultProps) {
 const defaultProps = type.defaultProps;
 for (propName in defaultProps) {
 if (props[propName] === undefined) {
 props[propName] = defaultProps[propName];
 }
 }
 }
 
 return ReactElement(
 type,
 key,
 ref,
 self,
 source,
 ReactCurrentOwner.current,
 props,
 );
}

const ReactElement = function(type, key, ref, self, source, owner, props) {
 // 最终得到的React元素
 const element = {
 // This tag allows us to uniquely identify this as a React Element
 $$typeof: REACT_ELEMENT_TYPE,

 // Built-in properties that belong on the element
 type: type,
 key: key,
 ref: ref,
 props: props,

 // Record the component responsible for creating this element.
 _owner: owner,
 };

 return element;
};

打印出组件:

浅谈从React渲染流程分析Diff算法

4、为什么需要使用virtual DOM

DOM管理历史阶段:

  1. JS 或者 jQuery 操作 DOM: 当应用程序越来越复杂,需要在JS里面维护的字段也越来越多,需要监听事件和在事件回调用更新页面的DOM操作也越来越多,应用程序会变得非常难维护。
  2. 后来产出 MVC、MVP 的架构模式,期望从代码组织方式来降低维护难度。但是 MVC 架构并没办法减少维护的状态,也没有降低状态更新时需要对页面的更新操作,你需要操作的DOM还是需要操作,只是换了个地方。
  3. 既然状态改变了要操作相应的DOM元素,为什么不做一个东西让视图和状态进行绑定,状态变更了视图自动变更。这就是后来人们想出了 MVVM 模式,只要在模版中声明视图组件是和什么状态进行绑定的,双向绑定引擎就会在状态更新的时候自动更新视图;
  4. 但MVVM双向数据绑定并不是唯一的办法,还有一个非常直观的方法:一旦状态发生了变化,就用模版引擎重新渲染整个视图,然后用新的视图更换掉旧的视图。

React采用的就是第四种模式;但是我们都知道对于操作DOM成本太高,而相对操作JavaScript就快速多了,而Html DOM可以很简单的用JavaScript对象表示出来(Virtual DOM就这样诞生了)

这样的做法会导致很多的问题,最大的问题就是这样做会很慢,因为即使一个小小的状态变更都要重新构造整棵 DOM,性价比太低;而React Virtual DOM在状态更新过程加了一些特别的操作来避免整棵 DOM 树变更(它就是接下来的Diff算法)。

接下来的Diff算法即将更新,敬请期待~~~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
理解Javascript_13_执行模型详解
Oct 20 Javascript
JS组件Bootstrap Select2使用方法详解
Apr 17 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
Mar 26 Javascript
ES6新特性之函数的扩展实例详解
Apr 01 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
Jul 17 Javascript
记一次webapck4 配置文件无效的解决历程
Sep 19 Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 Javascript
webpack4.x CommonJS模块化浅析
Nov 09 Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 Javascript
通过vue手动封装on、emit、off的代码详解
May 29 Javascript
小程序实现文字循环滚动动画
Jun 14 Javascript
帮你提高开发效率的JavaScript20个技巧
Jun 18 Javascript
详解Webpack-dev-server的proxy用法
Sep 08 #Javascript
详解Ubuntu安装angular-cli遇到的坑
Sep 08 #Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
Sep 07 #Javascript
Bootstrap-table使用footerFormatter做统计列功能
Sep 07 #Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 #jQuery
Bootstrap-table自定义可编辑每页显示记录数
Sep 07 #Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 #Javascript
You might like
新浪新闻小偷
2006/10/09 PHP
做个自己站内搜索引擎
2006/10/09 PHP
PHP的array_diff()函数在处理大数组时的效率问题
2011/11/27 PHP
PHPMailer使用教程(PHPMailer发送邮件实例分析)
2012/12/06 PHP
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
javascript 去字符串空格终极版(支持utf8)
2009/11/14 Javascript
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
javascript使用call调用微信API
2014/12/15 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
Bootstrap框架下下拉框select搜索功能
2020/03/26 Javascript
AngularJS  $on、$emit和$broadcast的使用
2016/09/05 Javascript
Angular 应用技巧总结
2016/09/14 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
2016/10/17 Javascript
详解jQuery lazyload 懒加载
2016/12/19 Javascript
教你使用vue-cli快速构建的小说阅读器
2019/05/13 Javascript
JavaScript中数组去重的5种方法
2020/07/04 Javascript
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
Python 使用requests模块发送GET和POST请求的实现代码
2016/09/21 Python
利用aardio给python编写图形界面
2017/08/21 Python
浅谈python 导入模块和解决文件句柄找不到问题
2018/12/15 Python
selenium处理元素定位点击无效问题
2019/06/12 Python
利用python实现周期财务统计可视化
2019/08/25 Python
python GUI库图形界面开发之PyQt5中QWebEngineView内嵌网页与Python的数据交互传参详细方法实例
2020/02/26 Python
python自动从arxiv下载paper的示例代码
2020/12/05 Python
用html5的canvas画布绘制贝塞尔曲线完整代码
2013/08/14 HTML / CSS
数控专业大学毕业生职业规划范文
2014/02/06 职场文书
追悼会主持词
2014/03/20 职场文书
公司合作意向书范文
2014/07/30 职场文书
任命书格式模板
2015/09/22 职场文书
2016年教师学习廉政准则心得体会
2016/01/20 职场文书
Python极值整数的边界探讨分析
2021/09/15 Python