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

比较虚拟的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. Thread类和Runable接口使用

    不废话,就一个类,直接拷贝代码执行 package com.jtfr.demo; /** * 主要:继承 Thread 类和 Runnable接口 * @author 陈康明 qq:112318152 ...

  2. sql 摘抄

    练习题和参考解 (1)查询“001”课程比“002”课程成绩低的所有学生的学号.001学科成绩.002学科成绩                 1 SELECT 2 s1.StudentNo, 3 s ...

  3. Sass--嵌套选择器

    Sass 中还提供了选择器嵌套功能,但这也并不意味着你在 Sass 中的嵌套是无节制的,因为你嵌套的层级越深,编译出来的 CSS 代码的选择器层级将越深,这往往是大家不愿意看到的一点.这个特性现在正被 ...

  4. Guarded Suspension模式简单实现

    Guarded Suspension 意为保护暂停,假设服务器很短时间内承受大量的客户端请求,客户端请求的数量超过服务器本身的即时处理能力,而服务器又不能丢弃任何一个客户端请求,此时可以让客户端的请求 ...

  5. 给元素绑定 class

    <div id="app04"> <label v-bind:class="{'Class1':Class1}">sasjadjagd& ...

  6. 【Flutter学习】组件通信(父子、兄弟）

    一,概述 flutter一个重要的特性就是组件化.组件分为两种状态,一种是StatefulWidget有状态组件,一种是StatelessWidget无状态组件. 无状态组件不能更新状态,有状态组件具 ...

  7. sql查询50题

    一个项目涉及到的50个Sql语句问题及描述:--1.学生表Student(S#,Sname,Sage,Ssex) --S# 学生编号,Sname 学生姓名,Sage 出生年月,Ssex 学生性别--2 ...

  8. VMware Workstation Pro 15.5.0 官方版本及激活密钥

    0x01:下载连接: https://download3.vmware.com/software/wkst/file/VMware-workstation-full-15.5.1-15018445.e ...

  9. 将libvex移植到Visual Studio编译平台下的经验总结

    1. 两难 将libvex从Linux移植到Windows,移植工作聚集于Cross-Compiler,而不是预料的Cross-Platform. VC++ Compiler到目前为止只支持C89标准 ...

  10. 2019 ACM-ICPC 南京 现场赛 K. Triangle (二分)

    题意 给定一个三角形和一个点 \(p\),如果该点不在三角形边上直接输出 \(-1\),否则在三角形上找一点 \(q\),使得线段 \(pq\) 平分三角形面积. 思路 看完题想都没想直接二分了. 就 ...