数据发生变化，页面改变的原理：

比较虚拟的dom 不怎么损耗性能，真实的dom比较会损耗性能

1.state 数据

2.jsx 模板

3.生成虚拟的dom

3.数据和模板结合，生成虚拟的dom

4.用虚拟的Dom 来生成真实的Dom,来显示

5.state 发生改变

6.数据和模板结合，生成虚拟的dom

7.比较新的虚拟Dom和旧的虚拟Dom，找出差别，改变

8.直接操作Dom,改变内容

jsx语法 => React.createElement=> 虚拟的Dom =>真实的Dom

<div>

<span></span>

</div>

=

React.createElement('div',{ },React.createElement('span',{}))

虚拟Dom 的好处：

性能提升

跨端应用得以实现

react 数据发生变化，页面改变的原理的更多相关文章

  1. vue 在使用数组的时候，数组内部数据发生变化，视图却没有改变

    data(){ return{ todos: [ {name: 'aa', age: 22}, {name: 'bb', age: 23} ] } } methods:{ changeTodos(){ ...

  2. SQL Server 2008数据备份与还原的原理是什么？

    为什么SqlServer有完整备份.差异备份和事务日志备份三种备份方式,以及为什么数据库又有简单模式.完整模式和大容量日志模式这三种恢复模式.本文内容适用于2005以上所有版本的SqlServer数据 ...

  3. react native 之页面布局

     第一章 flexbox 布局 1.flexDirection:'row', 水平 flexDirection:'column',垂直 需要在父元素上设置这种属性才能实现flex. flex:1 会撑 ...

  4. JSON、使用JSON进行数据交换的基础和原理

    1. JSON 1.1. JSON 1.1.1. 什么是JSON JSON即Javascript对象表示法,是一种现在主流的数据交换格式.之所以应用广泛还是由其简单易读所决定的. 简单,只有六种类型的 ...

  5. React Router v4 页面传值的三种方法

    传值方法 1.props.params 使用React router定义路由时,我们可以给指定一个path,然后指定通配符可以携带参数到指定的path: <Route path='/user/: ...

  6. vue 快速入门 系列 —— 侦测数据的变化 - [vue api 原理]

    其他章节请看: vue 快速入门 系列 侦测数据的变化 - [vue api 原理] 前面(侦测数据的变化 - [基本实现])我们已经介绍了新增属性无法被侦测到,以及通过 delete 删除数据也不会 ...

  7. Atitit.数据索引 的种类以及原理实现机制 索引常用的存储结构

    Atitit.数据索引 的种类以及原理实现机制 索引常用的存储结构 1. 索引的分类1 1.1. 按照存储结构划分btree,hash,bitmap,fulltext1 1.2. 索引的类型  按查找 ...

  8. MVC5 + EF6 + Bootstrap3 (10) 数据查询页面

    文章来源:Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-search-page.html 系列教程:MVC ...

  9. 实现excel导入导出功能，excel导入数据到页面中，页面数据导出生成excel文件

    今天接到项目中的一个功能,要实现excel的导入,导出功能.这个看起来思路比较清楚,但是做起了就遇到了不少问题. 不过核心的问题,大家也不会遇到了.每个项目前台页面,以及数据填充方式都不一样,不过大多 ...

随机推荐

  1. NOIP2016D1T3 换教室 （概率DP）

    NOIP2016D1T3 换教室 题目大意:有n个时间段,每个时间段i有两个教室a[i],b[i]可以上课,如果不申请换教室就在教室a[i]上课,如果换教室就在b[i]上课.你最多只能换m次教室.教室 ...

  2. Codeforces 360D Levko and Sets （数论好题）

    题意:有一个长度为n的数组a和一个长度为m的数组b,一个素数p.有n个集合,初始都只有一个1.现在,对(i从1到n)第i个集合执行以下操作: 对所有集合中的元素c,把c * (a[i] ^ b[j]) ...

  3. Python向方法中传递自定义类型参数

    定义类型 class Fish: def __init__(self,x): self.num = xclass Turtle: def __init__(self,y): self.num = yc ...

  4. Zip函数（Python）

    >>> z = zip((2,3,4),(33,44,55)) >>> z <zip object at 0x1022cdb88> >>&g ...

  5. js动态添加的元素绑定事件

    最近做的项目要实现一个动态添加动态删除的功能,思考了一下,该怎么给动态添加的元素绑定事件.最后觉得有两种方式比较可靠,第一种是在动态添加的html代码里添加oclick事件,然后给传个唯一的参数来判断 ...

  6. 每天一个linux命令：cp(8)

    cp cp命令用来将一个或多个源文件或者目录复制到指定的目的文件或目录.它可以将单个源文件复制成一个指定文件名的具体的文件或一个已经存在的目录下.cp命令还支持同时复制多个文件,当一次复制多个文件时, ...

  7. 基于c语言数据结构+严蔚敏——线性表章节源码，利用Codeblocks编译通过

    白天没屌事,那我们就来玩玩线性表的实现吧,快要失业了,没饭吃了咋整哦 题目描述假设利用两个线性表LA和LB分别表示两个集合A和B(即:线性表中的数据元素即为集合中的成员),现要求一个新的集合A=A∪B ...

  8. windows 下redis在后台运行

    打开命令终端,cd进入redis目录 安装redis服务:redis-server --service-install redis.windows.conf --loglevel verbose re ...

  9. [NOIP模拟测试31]题解

    A.math 考场乱搞拿了95,2333. 考虑裴蜀定理:$ax+by=z$存在整数解,当且仅当$gcd(a,b)|z$. 那么如果某个数能够被拼出来,就必须满足所有$a_i$的$gcd$是它的因子. ...

  10. C语言编译exe添加图标

    C语言是一门通用的计算机编程语言,可以直接编译为可执行文件.在windows下,可执行文件的后缀是exe,我们编写一个最简单的程序test.c: #include <stdlib.h> i ...