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

比较虚拟的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. css3--文字效果

    text-shadow <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...

  2. hdu 6134 Battlestation Operational (莫比乌斯反演+埃式筛)

    Problem Description   > The Death Star, known officially as the DS-1 Orbital Battle Station, also ...

  3. Integer之常用方法

    public static int parseInt(String s, int radix) throws NumberFormatException {} // radix进制 s 换成 10进制 ...

  4. 外部表及oracle数据库内存

    create table alert1 (log varchar2(1000))2 organization external3 (type oracle_loader4 default direct ...

  5. HTML—学习笔记

    1 .表格 <br/>换行 <p> align top<img src="./julizi.png" align="top" &g ...

  6. Javascript 数组 数字 字符串 时间等使用

    1．Javascript 数组API 1. //定义数组 2. var pageIds = new Array(); 3. pageIds.push('A'); 5. 数组长度 6. pageIds. ...

  7. Jmeter 5.1命令行执行bat文件

    一.编写run_jmeter,bat @echo off::设置参数::参考命令:jmeter -n -t d:\123.jmx -l result.jtl -e -o d:\report\repor ...

  8. POJ 3641 Pseudoprime numbers (数论+快速幂)

    题目链接:POJ 3641 Description Fermat's theorem states that for any prime number p and for any integer a ...

  9. Lucence使用入门

    参考: https://blog.csdn.net/u014209975/article/details/50525624 https://www.cnblogs.com/hanyinglong/p/ ...

  10. 推荐几个顶级的IT技术公众号，坐稳了！

    提升自我的路很多,学习是其中最为捷径的一条.丰富的知识提升的不仅仅是你的阅历,更能彰显你的气质,正如古人云:"文质彬彬是君子." 今天为大家整理了10个公众号,分别为多领域,多角度 ...