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

比较虚拟的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. Nginx的应用之安装配置

    一.Nginx简述 Nginx是一个开源且高性能.可靠的Http Web服务.代理服务. 开源: 直接获取源代码 高性能: 支持海量并发 可靠: 服务稳定 我们为什么选择 Nginx服务 Nginx非 ...

  2. Xfce4: 显示/隐藏 休眠/混合睡眠/挂起 按钮

    可以在xfconf配置项中创建如下属性控制: xfconf-query -c xfce4-session -np '/shutdown/ShowHibernate' -t 'bool' -s 'fal ...

  3. C# WinForm 提示框延迟自动关闭

    有时候我们需要弹出个提示框然后让它自己关闭,然而实际使用中的弹出框确实阻塞进程,网上貌似有一种另类的解决方式,大致思路是把弹出框放到另外的一个窗体上,直接贴代码 主窗体 using System; u ...

  4. Python3.5-20190508-廖老师-自我笔记-迭代器

    可以实现for ...in 的都可以称为,可迭代对象,Iterable 可以使用isinstance(是什么实例嘛)来判断是不是可迭代对象 可以被next()函数调用并不断返回下一个值的对象称为迭代器 ...

  5. python核心编程socket备忘

    服务器端: # Echo server program from socket import * from time import ctime HOST = '' # Symbolic name me ...

  6. 【leetcode】1001. Grid Illumination

    题目如下: On a N x N grid of cells, each cell (x, y) with 0 <= x < N and 0 <= y < N has a la ...

  7. 【leetcode】640. Solve the Equation

    题目如下: 解题思路:本题的思路就是解析字符串,然后是小学时候学的解方程的思想,以"2x+3x-6x+1=x+2",先把左右两边的x项和非x项进行合并,得到"-x+1=x ...

  8. TableStore最佳实践：GEO索引打造店铺搜索系统

    摘要: 如何使用TableStore打造店铺搜索系统 一.方案背景 对于一套GEO管理系统,其核心点与瓶颈在于数据库的存储性能与查询能力:一方面,存储服务需要应对海量数据的低延迟存.读,另一方面,存储 ...

  9. linux IPC 消息队列（二）

    我在网上想找多进程之间的通信方式,发现有人写的消息队列很好,搬过来: common.h #ifndef __COMMON_H_ #define __COMMON_H_ #include <std ...

  10. 【Java架构：基础技术】一篇文章搞掂：Spring Boot 官方文档解读

    本文篇幅较长,建议合理利用右上角目录进行查看(如果没有目录请刷新). 本文内容大部分是翻译和总结官方文档,可以到https://docs.spring.io/spring-boot/docs查看(此地 ...