react中的核心概念-程序员宅基地

技术标签: ViewUI  数据库  javascript  

DOM:浏览器中提供的概念;

虚拟DOM:框架中的概念;需要开发框架的程序员手动用JS对象来模拟DOM元素和嵌套关系;

  • 本质:用JS对象,模拟DOM树;
  • 目的:实现页面的按需更新;

要求:点击列头,实现按需排序;

1. 数据从哪儿来:从数据库查询而来

2. 数据存放在哪:浏览器内存中以对象数组形式表示

3. 如何渲染到页面:

  • 方案1:手动for循环整个数组。str+='<tr></tr>'
  • 方案2: 使用模板引擎。atr-template;(与方案1没有本质的区别,只是方便)

上述方案,存在性能上的缺陷:每次排序后,都需要重新渲染整个页面(包括没有发生变化的行)。

虚拟DOM

如何实现按需更新?

获取内存中的新旧两棵DOM树进行对比,得到需要被按需更新的DOM树

如何获取新旧DOM树?

分析:浏览器中没有提供直接获取DOM树的API;

方法:我们可以手动模拟新旧DOM树

如何模拟DOM树?

用JS对象,通过children嵌套DOM元素,构成DOM树

<ul id="list">
    <li class="item">item</li>
</ul>
var ul={
  tagName:'ul',
  attrs:{
     id:'list'
   },
children:[
{
tagName:'li',
attrs:{
class:'item'
},
children:['item']
}
] }

diff算法

  • tree diff:新旧DOM树,逐层对比的过程
  • component diff:进行tree diff时,每一层中,组件级别的对比
  • element diff:进行组件对比时,如果两个组件类型相同,则继续进行元素对比

 

转载于:https://www.cnblogs.com/embrace-ly/p/10605535.html

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_34246551/article/details/93353354

智能推荐

RecyclerView GridLayoutManager 自适应宽高_gridlayoutmanager 自适应宽度-程序员宅基地

文章浏览阅读8.7k次,点赞2次,收藏2次。import android.content.Context;import android.support.v7.widget.GridLayoutManager;import android.support.v7.widget.RecyclerView;import android.util.TypedValue;/** * Created by Administrator on 2_gridlayoutmanager 自适应宽度

浅谈实时流平台Kafka的消息系统设计_kafka实时方案-程序员宅基地

文章浏览阅读1.2k次。Many users of Kafka process data in processing pipelines consisting of multiple stages, where raw input data is consumed from Kafka topics and then aggregated, enriched, or otherwise transformed into ..._kafka实时方案

计算机控制闪光灯,摄影技巧 闪灯篇 光圈控制主体 快门控制场景 闪光灯又该如何调整输出功率?...-程序员宅基地

文章浏览阅读469次。先设定相机,后设定闪光灯。在离机闪领域,M 模式是应用上的大宗。在拍摄时,我们会面临两个问题,一个是闪光灯的出力(输出功率),另一个则是相机的测光、曝光设定。基本上,我们是先决定相机的设定值,再决定闪光灯的出力问题。先参考环境光,再考虑闪光灯。思考一下:在闪光灯未触发时,相机的设定值本身不能让主体过曝!当主体已过曝,那么闪光灯进来时,结果还是过曝!但如果主体曝光不足,我们就用闪灯将他补足光线。如何..._光圈控制主体的明暗

.Net Core5.0 上传文件报错413 Request Entity Too Large_.net core 413 request entity too large-程序员宅基地

文章浏览阅读612次。开发环境:.Net Core 5.0 + MVC 进行开发.Net Core5.0 上传文件报错413 Request Entity Too Large_.net core 413 request entity too large

pythoninstaller打包 其他电脑无法运行_新手初学 py 后用 pyinstaller 打包程序后运行 exe 出现问题...-程序员宅基地

文章浏览阅读450次。用 python3.6 制作了个爬虫。在 pycham 里能正常运行,用了 requests,beautifulsoup,pandas,json,re,datetime 等第三方库但是 pyinstaller 打包完成没什么问题,运行 exe 程序就出现了错误:源码地址: https://gitee.com/rufengkj/zwu_educational_system/blob/master/s..._pyinstaller打包后别人的电脑不运行

设有一数据库,包括四个表:学生表(Student)、课程表(Course)、成绩表(Score)以及教师信息表(Teacher)_设有一个数据库,包括四个表:学生表-程序员宅基地

文章浏览阅读3.4w次,点赞32次,收藏238次。设有一数据库,包括四个表:学生表(Student)、课程表(Course)、成绩表(Score)以及教师信息表(Teacher)。四个表的结构分别如表1-1的表(一)~表(四)所示,数据如表1-2的表(一)~表(四)所示。用SQL语句创建四个表并完成相关题目。表1-1数据库的表结构表(一)Student (学生表) 字段名 数据类型 可否为空 ..._设有一个数据库,包括四个表:学生表

随便推点

蒲公英 · JELLY技术周刊 Vol.06: Deno 1.0 发布前瞻,“真香定律”能否再现_在影片的不同阶段,鼠标交互有不同的效果,非常巧妙地将 web 技术与影片叙事结合到-程序员宅基地

文章浏览阅读849次。登高远眺天高地迥,觉宇宙之无穷基础技术Deno 1.0 即将发布,你需要知道的都在这里了Deno——来自 Node 之父 Ryan Dahl 的最新力作,在开源 2 年之际,终于将迎来 1.0 的正式版本。Deno 并不是 Node 的替代品,根据 Deno GitHub 官网上的介绍,Deno 是一款通用的 JavaScript/TypeScript 编程环境,它汇集了许多最出色的开源技术,并使用一个很小的可执行文件提供了全面的解决方案。如今的 Deno,基于 Rust,内置了 TypeS._在影片的不同阶段,鼠标交互有不同的效果,非常巧妙地将 web 技术与影片叙事结合到

mysql报错1708_mysql的AB及读写和集群-程序员宅基地

文章浏览阅读60次。Mysql的AB及读写第1章 Mysql的AB配置1.1 master配置1.2slave配置1.2.1 192.168.13.1901.2.2 192.168.13.1911.2.3 192.168.13.1921.2.4 192.168.13.1931.2.4 192.168.13.189第2章 读写分离2.1安装mycat2.1.1 server.xml2.1.1 schema.xml2..._hy000 1708

解决树莓派3B+:只有红灯常亮绿灯不亮_树莓派启动不了,绿灯一直不亮-程序员宅基地

文章浏览阅读1w次,点赞2次,收藏10次。一句话总结本文解决方法:可能是烧录软件有问题,使用Etcher烧录后,可正常开机;以下为解决该问题过程:最近重新给树莓派3B+安装系统,按照之前的方法往SD卡烧录系统:烧录方法:1 .SDFormatter格式化SD卡; 2.Win32DiskImager负责写入系统;接通电源后只有红灯亮,绿灯不亮,查询文章和问答,基本没有很好的解决这个问题:文章和问答常见总结:SD卡有问题,或者树莓派坏了;继续查找问题,知知乎上这篇文章如何给树莓派安装操作系统 - 知乎介绍安装SD卡的_树莓派启动不了,绿灯一直不亮

java反序列化耗时_java序列化方式性能比较-程序员宅基地

文章浏览阅读1.1k次。有一个很不错的工具http://github.com/eishay/jvm-serializers/,可以用它来评测各种流行的java序列化反序列化工具,使用上也很简单。想试试该工具的,下载源码后参考起README操作即可。而我更关心的是,是各种工具的性能对比,以作选择的一个衡量标准,也就是http://github.com/eishay/jvm-serializers/wiki的 图示和数据..._序列化反序列化耗时分析

r语言 c 函数返回值,R语言入门 输出函数 cat、print、paste等区别理解-程序员宅基地

文章浏览阅读2.8k次。一、 简介cat、print函数都是输出函数> cat("hello world")hello world>> print("hello world")[1] "hello world"print的输出有点像列表输出的未命名元素> alist=list(c(1,2,3,4,5),c('a','b','c','d','e'))> alist[[1]][1] 1 2 3 ..._r语言print

hadoop启动和运行中的error总结和处理方法-程序员宅基地

文章浏览阅读248次。错误一:2010-11-09 16:59:07,307 INFO org.apache.hadoop.ipc.Server: Error register getProtocolVersionjava.lang.IllegalArgumentException: Duplicate metricsName:getProtocolVersionat org.apa..._启动hadoop报错 got error reading edit log input stream