###################  鸡汤一碗  ########################

与其担心未来,不如现在好好努力。

这条路上,只由奋斗才能给你安全感。

不要轻易把梦想寄托在某个人身上,也不要太在乎身旁的耳语,

因为未来是你自己的,只有你自己才能给你自己最大的安全感。

###########################################

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相关推荐

  1. React Diff 算法

    React介绍 React是Facebook开发的一款JS库,用于构建用户界面的类库. 它采用声明式范例,可以传递声明代码,最大限度地减少与DOM的交互. 特点: 声明式设计:React采用声明范式, ...

  2. React Diff算法详解

    react diff算法 diff算法, 是 Virtual DOM 产生的一个概念, 用来计算出Virtual DOM中真正变化的部分,并只针对该部分进行原生DOM操作,而非重新渲染整个页面,从而提 ...

  3. 关于react diff 算法(译文)

    React是由facebook开发,用于构建用户界面的js类库,以提升性能为设计理念.在本文中,我将为大家介绍在React中的diff算法,以及它的渲染机制,以便于你能够更好的优化你的程序. Diff ...

  4. diff 算法深入一下?

    一.前言 有同学问:能否详细说一下 diff 算法. 简单说:diff 算法是一种优化手段,将前后两个模块进行差异化比较,修补(更新)差异的过程叫做 patch,也叫打补丁. 文章主要解决的问题: 1 ...

  5. Vue2 的 diff 算法

    Vue2 的 diff 算法 答:Diff 算法是一种对比算法.对比两者是 旧虚拟 DOM 和新虚拟 DOM,对比出是哪个 虚拟节点更改了,找出这个 虚拟节点并只更新这个虚拟节点所对应的 真实节点而不 ...

  6. ReactiveNative学习之Diff算法

    React 源码剖析系列 - 不可思议的 react diff 深入浅出React(四):虚拟DOM Diff算法解析 React diff 算法 总结链接引用的文章 React出于性能的考虑,为了避 ...

  7. React 源码剖析系列 - 不可思议的 react diff

    目前,前端领域中 React 势头正盛,使用者众多却少有能够深入剖析内部实现机制和原理.本系列文章希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. React diff 作 ...

  8. diff算法_详解 React 16 的 Diff 策略

    这是我 Deep In React 系列的第二篇文章,如果还没有读过的强烈建议你先读前一篇:详谈 React Fiber 架构(1). 前言 我相信在看这篇文章的读者一般都已经了解过 React 16 ...

  9. React中diff算法的理解

    React中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DO ...

  10. 从0实现react框架,React Fiber架构和Fiber Diff算法

    react框架是目前最为流行的前端框架之一,尤其在很多大厂,应用更为广泛.相对于一些mvvm框架,react上手需要一定的技术基础,但掌握后,编码体验和性能是很不错的.react整体思想是函数式编程, ...

最新文章

  1. 【Android 热修复】热修复原理 ( 合并两个 Element[] dexElements | 自定义 Application 加载 Dex 设置 | 源码资源 )
  2. 无法直接启动带有“类库输出类型”的项目
  3. POJ 1195 Mobile phones【 二维树状数组 】
  4. Spring Cloud教程–使用Spring Cloud Bus自动刷新配置更改
  5. 外设驱动库开发笔记1:AD56xx系列DAC驱动
  6. NUC1419 位操作【位运算+STL】
  7. 苹果电脑如何快速用计算机,苹果电脑快捷键如何使用 Mac快捷键大全详细教程...
  8. (Word论文插入高清图片)软件设置教程
  9. SXF-2021软测实习生笔试
  10. Mac教程——怎么升级系统版本
  11. 《管理长歌行》—— 小花狗的错误
  12. iOS: 仿新浪微博 OC (持续更新ing)
  13. 不知道视频转文字软件哪个好用?视频转文字软件大分享
  14. 自主可控国产服务器思考
  15. 如何阅读一个前向推理框架?以NCNN为例
  16. html 页面 title keyworld 的 SEO优化的 基本设置格式
  17. 2021河南省第十三届ACM/icpc大学生程序设计竞赛榜单
  18. 支撑程序员的三种精神
  19. 基于语义分割的身份证部件解析和文字检测
  20. 谈谈如何抓取ajax动态网站

热门文章

  1. 跟我学Spring Cloud(Finchley版)-18-Zuul深入
  2. 基础算法:与、或、异或运算
  3. Linux下安装配置PHP环境(下)---PHP
  4. Android系统源码分析--Process启动过程
  5. JNI学习-- C调用java方法
  6. Windows7磁盘检查与整理的使用
  7. ssh: connect to host port 22: Connection refused
  8. c++ static 关键字总结
  9. 设计模式---状态模式(C++实现)
  10. false在python什么意思_python – `x [False]`在numpy中做什么?