当前位置 : 主页 > 编程语言 > java >

React,如何理解虚拟DOM,以及相关优质博客推荐

来源:互联网 收集:自由互联 发布时间:2022-07-04
React在Virtual DOM上实现了DOM diff算法,当数据更新时,会通过diff算法计算出相应的更新策略,尽量只对变化的部分进行实际的浏览器的DOM更新,而不是直接重新渲染整个DOM树,从而达到提

React在Virtual DOM上实现了DOM diff算法,当数据更新时,会通过diff算法计算出相应的更新策略,尽量只对变化的部分进行实际的浏览器的DOM更新,而不是直接重新渲染整个DOM树,从而达到提高性能的目的。

你给我一个数据,我根据这个数据生成一个全新的Virtual DOM,然后跟我上一次生成的Virtual DOM去 diff,得到一个Patch,然后把这个Patch打到浏览器的DOM上去。

你不要一步一步告诉我这件事情怎么做,什么先和面再剁馅,NO,告诉我你想要煎饼还是月饼,我会想办法去做的,不要来干扰我。

哪怕是我生成了virtual dom,哪怕是我跑了diff,但是我根据patch简化了那些DOM操作省下来的时间依然很可观。所以总体上来说,还是比较快。

用 JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文档当中当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异把2所记录的差异应用到步骤1所构建的真正的DOM树上,视图就更新了

Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。可以类比 CPU 和硬盘,既然硬盘这么慢,我们就在它们之间加个缓存:既然 DOM 这么慢,我们就在它们 JS 和 DOM 之间加个缓存。CPU(JS)只操作内存(Virtual DOM),最后的时候再把变更写入硬盘(DOM)。

 

1.​​深入理解react中的虚拟DOM、diff算法​​

2.​​深度剖析:如何实现一个 Virtual DOM 算法​​

3.​​https://github.com/Matt-Esch/virtual-dom​​

4.​​如何理解虚拟DOM?​​

5.mvc mvp mvvm:​​界面之下:还原真实的MV*模式​​

6.​​理顺react,flux,redux这些概念的关系​​

7.​​React.js 小书​​

 

 

 

 

 

 


【本文转自:日本cn2服务器 http://www.558idc.com/jap.html提供,感恩】
上一篇:设计模式——策略模式
下一篇:没有了
网友评论