react 数据发生变化,页面改变的原理
数据发生变化,页面改变的原理:
比较虚拟的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 数据发生变化,页面改变的原理的更多相关文章
- vue 在使用数组的时候,数组内部数据发生变化,视图却没有改变
data(){ return{ todos: [ {name: 'aa', age: 22}, {name: 'bb', age: 23} ] } } methods:{ changeTodos(){ ...
- SQL Server 2008数据备份与还原的原理是什么?
为什么SqlServer有完整备份.差异备份和事务日志备份三种备份方式,以及为什么数据库又有简单模式.完整模式和大容量日志模式这三种恢复模式.本文内容适用于2005以上所有版本的SqlServer数据 ...
- react native 之页面布局
第一章 flexbox 布局 1.flexDirection:'row', 水平 flexDirection:'column',垂直 需要在父元素上设置这种属性才能实现flex. flex:1 会撑 ...
- JSON、使用JSON进行数据交换的基础和原理
1. JSON 1.1. JSON 1.1.1. 什么是JSON JSON即Javascript对象表示法,是一种现在主流的数据交换格式.之所以应用广泛还是由其简单易读所决定的. 简单,只有六种类型的 ...
- React Router v4 页面传值的三种方法
传值方法 1.props.params 使用React router定义路由时,我们可以给指定一个path,然后指定通配符可以携带参数到指定的path: <Route path='/user/: ...
- vue 快速入门 系列 —— 侦测数据的变化 - [vue api 原理]
其他章节请看: vue 快速入门 系列 侦测数据的变化 - [vue api 原理] 前面(侦测数据的变化 - [基本实现])我们已经介绍了新增属性无法被侦测到,以及通过 delete 删除数据也不会 ...
- Atitit.数据索引 的种类以及原理实现机制 索引常用的存储结构
Atitit.数据索引 的种类以及原理实现机制 索引常用的存储结构 1. 索引的分类1 1.1. 按照存储结构划分btree,hash,bitmap,fulltext1 1.2. 索引的类型 按查找 ...
- MVC5 + EF6 + Bootstrap3 (10) 数据查询页面
文章来源:Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-search-page.html 系列教程:MVC ...
- 实现excel导入导出功能,excel导入数据到页面中,页面数据导出生成excel文件
今天接到项目中的一个功能,要实现excel的导入,导出功能.这个看起来思路比较清楚,但是做起了就遇到了不少问题. 不过核心的问题,大家也不会遇到了.每个项目前台页面,以及数据填充方式都不一样,不过大多 ...
随机推荐
- React 滚动事件
代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UT ...
- jQuery遍历之向上遍历
1.parent $(document).ready(function(){ $("a").parent().css({border:"4px solid black&q ...
- oracle 数据库插入中文乱码
一. 查询数据库编码 select userenv('language') from dual; 查询服务器编码 select * from v$nls_parameters; 推出sql查询系统编码 ...
- interrupt和interrupted和isInterrupted的区别
原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11413917.html interrupt Code Demo package org.fool.th ...
- Python执行和拷贝
import paramiko from scp import SCPClient class LinuxSSHSCP(object): def __init__(self, ip, username ...
- xshell 挪动文件夹
cp -rp /home/d001 /home/Documents 复制/home下d001到/home下Documents -r 是遍历目录,即复制整个目录-p 是保留原有属性 查看的命令是cat ...
- The Second Scrum Meeting!
第七周会议 情况简述 会议概要:汇报已完成的任务,讨论并解决遇到的问题 参与人员:詹晓宇 谢赛金 熊紫仁 徐翠萍 周娟 孙尚煜 会议地点:六区研讨性教室 具体内容 小组成员 已完成任务 计划 ...
- 处理post上传的文件;并返回路径
/** * 处理post上传的文件:并返回路径 * @param string $path 字符串 保存文件路径示例: /Upload/image/ * @param string $format 文 ...
- 2019 牛客暑期多校 B generator 1 (矩阵快速幂+倍增)
题目:https://ac.nowcoder.com/acm/contest/885/B 题意:给你x0,x1,让你求出xn,递推式时xn=a*xn-1+b*xn-2 思路:这个n特别大,我自己没有摸 ...
- 【Shiro】四、Apache Shiro授权
1.授权实现方式 1.1.什么是授权 授权包含4个元素(一个比较流行通用的权限模型) Resources:资源 各种需要访问控制的资源 Permissions:权限 安全策略控制原子元素 基于资源和动 ...