react —— diff算法与VDOM
################### 鸡汤一碗 ########################
与其担心未来,不如现在好好努力。
这条路上,只由奋斗才能给你安全感。
不要轻易把梦想寄托在某个人身上,也不要太在乎身旁的耳语,
因为未来是你自己的,只有你自己才能给你自己最大的安全感。
###########################################
diff 算法 保留节点 ,减少复杂度。diff算法遵循以下原则
1. 同层级对比原则。
div->p 删掉重新创建
div key=1 -> div key=2 删掉重新创建
<Child1> -> <Child2> 组件名不同删除重新创建
2. 列表设置key (item.id)
[0,1,4,5]
a b c d
[0,1,8,4,5]
a b e c d
3. 同class 名的 component
<div>
<child1></child1>
<child2></child2>
<child3></child3>
</div>
<div>
<child1></child1>
<child2></child2>
<child4></child4>
</div>
render(){
if(this.state.isShow){
return <Home/>
}else{
return <Child/>
}
}
4. 合并操作(批量操作)
this.setState({
count:this.state.count+1
})
this.setState({
a:this.state.count+1
})
this.setState({
b:this.state.count+1
})
// this.setState({
// count:///,
// a,
// b,
// })
//
// this.setState({
// name:"kerwin"
// })
// this.setState({
// name:"xiaoming"
// })
// this.setState({
// name:"kerwin"
// })
//
5. 选择性子树渲染
shouldComponentUpdate
return false
return true
// {
// name:'kerwin',
// key:1
// chidlren:[
// {
// name:'11',
// chidlren:[
// ]
// }
// ],
// }
// {
// name:'kerwin',
// key:1
// chidlren:[
// {
// name:'22',
// chidlren:[
// ]
// }
// ],
// }
js的v8引擎,执行效率非常高
dom渲染的时候用webkit引擎——dom树然后在到渲染树
########################VDOM##############################
虚拟dom:创建新的虚拟dom,对比旧的虚拟dom,然后以最小的代价来更新dom树
转载于:https://www.cnblogs.com/yangxueyou/articles/9875054.html
react —— diff算法与VDOM相关推荐
- React Diff 算法
React介绍 React是Facebook开发的一款JS库,用于构建用户界面的类库. 它采用声明式范例,可以传递声明代码,最大限度地减少与DOM的交互. 特点: 声明式设计:React采用声明范式, ...
- React Diff算法详解
react diff算法 diff算法, 是 Virtual DOM 产生的一个概念, 用来计算出Virtual DOM中真正变化的部分,并只针对该部分进行原生DOM操作,而非重新渲染整个页面,从而提 ...
- 关于react diff 算法(译文)
React是由facebook开发,用于构建用户界面的js类库,以提升性能为设计理念.在本文中,我将为大家介绍在React中的diff算法,以及它的渲染机制,以便于你能够更好的优化你的程序. Diff ...
- diff 算法深入一下?
一.前言 有同学问:能否详细说一下 diff 算法. 简单说:diff 算法是一种优化手段,将前后两个模块进行差异化比较,修补(更新)差异的过程叫做 patch,也叫打补丁. 文章主要解决的问题: 1 ...
- Vue2 的 diff 算法
Vue2 的 diff 算法 答:Diff 算法是一种对比算法.对比两者是 旧虚拟 DOM 和新虚拟 DOM,对比出是哪个 虚拟节点更改了,找出这个 虚拟节点并只更新这个虚拟节点所对应的 真实节点而不 ...
- ReactiveNative学习之Diff算法
React 源码剖析系列 - 不可思议的 react diff 深入浅出React(四):虚拟DOM Diff算法解析 React diff 算法 总结链接引用的文章 React出于性能的考虑,为了避 ...
- React 源码剖析系列 - 不可思议的 react diff
目前,前端领域中 React 势头正盛,使用者众多却少有能够深入剖析内部实现机制和原理.本系列文章希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. React diff 作 ...
- diff算法_详解 React 16 的 Diff 策略
这是我 Deep In React 系列的第二篇文章,如果还没有读过的强烈建议你先读前一篇:详谈 React Fiber 架构(1). 前言 我相信在看这篇文章的读者一般都已经了解过 React 16 ...
- React中diff算法的理解
React中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DO ...
- 从0实现react框架,React Fiber架构和Fiber Diff算法
react框架是目前最为流行的前端框架之一,尤其在很多大厂,应用更为广泛.相对于一些mvvm框架,react上手需要一定的技术基础,但掌握后,编码体验和性能是很不错的.react整体思想是函数式编程, ...
最新文章
- 【Android 热修复】热修复原理 ( 合并两个 Element[] dexElements | 自定义 Application 加载 Dex 设置 | 源码资源 )
- 无法直接启动带有“类库输出类型”的项目
- POJ 1195 Mobile phones【 二维树状数组 】
- Spring Cloud教程–使用Spring Cloud Bus自动刷新配置更改
- 外设驱动库开发笔记1:AD56xx系列DAC驱动
- NUC1419 位操作【位运算+STL】
- 苹果电脑如何快速用计算机,苹果电脑快捷键如何使用 Mac快捷键大全详细教程...
- (Word论文插入高清图片)软件设置教程
- SXF-2021软测实习生笔试
- Mac教程——怎么升级系统版本
- 《管理长歌行》—— 小花狗的错误
- iOS: 仿新浪微博 OC (持续更新ing)
- 不知道视频转文字软件哪个好用?视频转文字软件大分享
- 自主可控国产服务器思考
- 如何阅读一个前向推理框架?以NCNN为例
- html 页面 title keyworld 的 SEO优化的 基本设置格式
- 2021河南省第十三届ACM/icpc大学生程序设计竞赛榜单
- 支撑程序员的三种精神
- 基于语义分割的身份证部件解析和文字检测
- 谈谈如何抓取ajax动态网站
热门文章
- 跟我学Spring Cloud(Finchley版)-18-Zuul深入
- 基础算法:与、或、异或运算
- Linux下安装配置PHP环境(下)---PHP
- Android系统源码分析--Process启动过程
- JNI学习-- C调用java方法
- Windows7磁盘检查与整理的使用
- ssh: connect to host port 22: Connection refused
- c++ static 关键字总结
- 设计模式---状态模式(C++实现)
- false在python什么意思_python – `x [False]`在numpy中做什么?