前端优化的主要方面就是减少页面的DOM操作,减少重排和重绘,React在这方面做了优化,采用了所谓的虚拟DOM,其实我们平时也会遇到虚拟DOM,只是你没有注意罢了,请听我娓娓道来。
 所谓的虚拟DOM就是JavaScript对象,就是在没有真实渲染DOM之前做的操作,给你举几个例子来看看:
 (1)createElement('Button')  这就创建了一个虚拟的button,为啥?因为没有插入到实际页面中去,这就是虚拟DOM! 
 (2)DocumentFragment(文档碎片 )  创建虚拟的节点,一次性插入页面结构  方法:使用DocumentFragment=====>>>>>>是一个占位符,把它插入节点的时候是插入它所有的子节点,本身不会插入  举个例子来说:

var frag=document.createDocumentFragment();
for(var i=0;i<10;i++){
   var l=document.createElement("li");
   l.innerHTML="ss";
   frag.appendChild(l);
}
document.getElementById("list").appendChild(frag);

React的一个突出特点是拥有极速地渲染性能。该功能依靠的就是facebook研发团队弄出的虚拟dom机制以及其独特的diff算法。下面简单解释一下react虚拟dom机制和diff算法的实现思想:
        要讲虚拟dom机制必须提到一个概念——虚拟dom树,这是react在真实dom树基础上建立的一个抽象的树,应用、虚拟dom与真实dom的关系如下图显示:


而标准的dom机制如下图所示:

标准dom机制下,用户在应用上的操作是直接对真实dom进行操作的,而在react应用中,用户在应用中对dom的操作其实是对虚拟dom的操作,用户的操作产生的数据改变或者state变量改变(此处的改变具体的讲就是事件函数对dom的操作)都会保存到虚拟dom上,之后再批量的对这些更改进行diff算法计算,对比操作前后的虚拟dom树,把更改后的变化再同步到真实dom上。

1.在标准dom机制下:在同一位置对比前后的dom节点,发现节点改变了,会继续比较该节点的子节点,一层层对比,找到不同的节点,然后更新节点。

2.在react的diff算法下,在同一位置对比前后dom节点,只要发现不同,就会删除操作前的domm节点(包括其子节点),替换为操作后的dom节点。

diff算法的处理方法,对操作前后的dom树同一层的节点进行对比,一层一层对比,如下图:


 

import React, {Component} from 'react'//js、jsx文件引入react
import './One.css' //js、jsx文件引入css:
class One extends Component{
render(){
console.log('one render');
return (
<div className="image">
<img src={this.props.path} alt=""/>
</div>
)
}
 
shouldComponentUpdate(){
console.log('one shouldComponentUpdate');
return false;//
}
/*react性能优化非常重要的一环。组件接受新的state或者props时调用,
我们可以设置在此对比前后两个props和state是否相同,
如果相同则返回false阻止更新,因为相同的属性状态一定会生成相同的dom树,
这样就不需要创造新的dom树和旧的dom树进行diff算法对比,节省大量性能,
尤其是在dom结构复杂的时候 */
}
export default One; //输出One函数

react diff算法:前往..

shouldComponentUpdate避免组件无意义渲染

shouldComponentUpdate是react提供的生命周期函数,他发生在接收到新的props的时候。

简单介绍一下各个生命周期函数。
(1).componentWillMount:组件挂载之前执行,只执行一次
(2).componentDidMount: 组件渲染完成,只执行一次

(3).componentWillRecevieProps: 组件将要接收新的props执行
(4).shouldComponentUpdate: 判断组件是否应该重新渲染,默认是true
(5).componentWillUpdate: 组件将要重新渲染
(6).componentDidUpdate: 组件重新渲染完成
(7).componentWillUnmount: 卸载组件

组件生命周期是有顺序的,首先挂载组件,挂载成功完成第一次渲染,然后传递新的props,则会触发componentWillRecevieProps,执行重新渲染的周期,直至渲染完成。

借别人的一个博客更好的了解ShouldComponentUpdata  跳转

react 的虚拟dom的更多相关文章

  1. React的虚拟DOM

    ReactJs的一大特点就是引进了虚拟dom(Virtual DOM)的概念.为什么我们需要Virtual DOM,Virtual DOM给我们带来了什么优势. 首先我们要了解一下浏览器的工作流. 当 ...

  2. 【React自制全家桶】二、分析React的虚拟DOM和Diff算法

    一.React如何更新DOM内容: 1.  获取state 数据 2.  获取JSX模版 3.  通过数据 +模版结合,生成真实的DOM, 来显示,以下行代码为例(简称代码1) <div id= ...

  3. JavaScript是如何工作的:编写自己的Web开发框架 + React及其虚拟DOM原理

    这是专门探索 JavaScript 及其所构建的组件的系列文章的第 19 篇. 如果你错过了前面的章节,可以在这里找到它们: JavaScript 是如何工作的:引擎,运行时和调用堆栈的概述! Jav ...

  4. react中虚拟dom的diff算法

    .state 数据 .jsx模板 .生成虚拟dom(虚拟DOM就是一个js对象,用它来描述真实DOM) ['div', {id:'abc'}, ['span', {}, 'hello world']] ...

  5. react中虚拟DOM的基本概念

    react中的核心概念 1.DOM的本质是什么: 浏览器中的概念,用js对象来表示页面上的元素,并提供操作DOM对象的API 2.什么事react中的虚拟DOM:是框架中的概念,是程序员用js对象来模 ...

  6. React:关于虚拟DOM(Virtual DOM)

    Virtual DOM 是一个模拟 DOM 树的 JavaScript 对象. React 使用 Virtual DOM 来渲染 UI,当组件状态 state 有更改的时候,React 会自动调用组件 ...

  7. React virtual DOM explained in simple English/简单语言解释React的虚拟DOM

    初学React,其中一个很重要的概念是虚拟DOM,看了一篇文章,顺带翻译一下. If you are using React or learning React, you must have hear ...

  8. React之虚拟DOM中的Diff算法

    一.React中的setState ( 异步函数,异步获取数据 ) 若操作的时间间隔短,它可以将多个setState结合成一个setState,减少虚拟DOM的比对次数,提高性能 二.同层虚拟DOM对 ...

  9. 9 react 基础 - 虚拟DOM

    一.虚拟DOM React 原理 1. 存放 state 数据 2. JSX 模版 3. 数据 + 模版 生成虚拟DOM(虚拟DOM就是一个JS 对象, 用来描述真实DOM) eg: ['div', ...

随机推荐

  1. Models-查询详细操作

    # 单表简单查询13种方法 1.all(): 查询所有结果 all: models.表名.objects.all() book_all=models.Book.objects.all() # 结果是q ...

  2. (jmeter内置可调用的变量)jmeter beanShell断言

    用户可以在jmeter- “beanShell断言”中自定义断言.自由灵活的用脚本实现自己的断言  beanShell断言接口介绍  在beanShell中直接可以调用的变量,无需加前缀.  1.lo ...

  3. Spring 学习(三)AOP

    (1)AOP概述 - AOP:面向切面编程,扩展功能不修改源代码实现 - AOP采取横向抽取机制,取代了传统的纵向继承体系重复性代码 (2)AOP底层原理 原始方法------->纵向继承体系 ...

  4. .Net core使用XRPC创建远程接口的Actor对象

    Actor是一种高并发处理模型,每个Actor都有着自己的状态有序消息处理机制,所以在业务处理的情况并不需要制定锁的机制,从而达到更高效的处理能性.XRPC是一个基于远程接口调用的RPC组件,它可以简 ...

  5. ACdream 1427—— Nice Sequence——————【线段树单点更新,区间查询】

    Nice Sequence Time Limit: 4000/2000MS (Java/Others)    Memory Limit: 128000/64000KB (Java/Others) Su ...

  6. 最简实例演示asp.net5中用户认证和授权(2)

    上接最简实例演示asp.net5中用户认证和授权(1) 基础类建立好后,下一步就要创建对基础类进行操作的类了,也就是实现基础类的增删改查(听起来不太高大上),当然,为了使用asp.net5的认证机制, ...

  7. 用代码学习TreeView控件

    private void Form1_Load(object sender,EventArgs e){ //游离对象 TreeNode tn=new TreeNode("我很好") ...

  8. OO 第三单元总结

    1. JML梳理 根据JML LEVEL 0手册梳理常用条目 1.1 JML 理论基础 \result表达式 : 表示方法返回值 \old( expr )表达式:表示方法执行之前expr表达式取值,若 ...

  9. Unity调用外部摄像头,全屏显示摄像头画面

    有两种方法,常用的是GUI方法,代码如下: public class CameraTest : MonoBehaviour { WebCamTexture camTexture; void Start ...

  10. [SVN]TortoiseSVN报“500 Internal Server Error”错误的解决方法

    背景:由于某种原因,本人重启了一下SVN服务的物理机,重启过后发现所有人访问SVN都报如下错误. 由于重启之前是没有做过任何改动,所以面对这个错误有点摸不着头脑,防火墙.网管.清缓存等方法都试过,还没 ...