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

比较虚拟的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. 利用Kubernetes(K8S)部署JAVA项目

    一.jar包和war包区别 首先简单介绍一下jar包和war包区别,当时就没分清,导致部署总是傻傻分不清楚. jar包:jar包就是java的类进行编译生成的class文件就行打包的压缩包.里面是一些 ...

  2. 使用egg.js和egg-sequelize连接mysql

    1.通过 egg-init 初始化一个项目: egg-init --type=simple --dir=sequelize-projectcd sequelize-projectnpm i 2.安装并 ...

  3. Python3.5-20190519-廖老师-自我笔记-获取对象信息

    总是优先使用isinstance()判断类型,可以将指定类型及其子类“一网打尽”. 如果要获得一个对象的所有属性和方法,可以使用dir()函数,它返回一个包含字符串的list,比如,获得一个str对象 ...

  4. matlab 代码分析

    在command window中输入 >> profile on>> profile clear>> profile viewer 就会出现如下窗口 在将头所指向的 ...

  5. UOJ197 线性规划

    传送门 由于这道题标程GG了所以必不可能AC嘛2333 单纯形法是一个很玄学的东西qwq 就是 非标准型 -> 标准型 -> 规范型 -> 松弛型 一个玄学操作——转轴操作(priv ...

  6. 西电源ubuntu12

    deb http://linux.xidian.edu.cn/mirrors/ubuntu/ precise main restricted universe multiverse #deb-src ...

  7. zk不同页面之间的即时刷新

    公共刷新方法 import org.zkoss.bind.annotation.GlobalCommand; import org.zkoss.bind.annotation.NotifyChange ...

  8. Mybatis基于XML配置SQL映射器(三)

    Mybatis之动态SQL mybatis 的动态sql语句是基于OGNL表达式的.可以方便的在 sql 语句中实现某些逻辑. 总体说来mybatis 动态SQL 语句主要有以下几类: if choo ...

  9. shell脚本学习（2）查找

    1 grep 用法: grep -F  fa      找含有fa字符的字符串 yuyuyu@ubuntu:~$ grep -F fa < do.txt grep -i  fa      忽略大 ...

  10. 最新最全最详细的MacOS 10.14 Mojave黑苹果安装教程

    图文教程知乎地址:点击打开链接 视频教程B站地址:点击打开链接 微信公众号 地 址:点击打开链接 准备工作(工具包及镜像在后边) 一个8G以上的U盘(有的U盘标的是8G,实际只有7.X,实际容量小于7 ...