react 虚拟dom
Posted Robert带你玩前端
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react 虚拟dom相关的知识,希望对你有一定的参考价值。
1、虚拟dom的产生
原生的dom我们可以直接的进行操作(创建以及修改),通过监听事件进行组件的通信;在虚拟dom中,我们通过.babelrc以及"transform-react-jsx"将代码结构转换成javasctipt对象的形式,再将这个对象转化成我们的真是dom,这个javascript对象就是我们说的虚拟dom
虚拟dom好处
a: 提高开发效率
b: 保证性能下限
虚拟DOM可以经过diff找出最小差异,然后批量进行patch,这种操作虽然比不上手动优化,但是比起粗暴的DOM操作性能要好很多,因此虚拟DOM可以保证性能下限
c: 无需手动操作dom
虚拟DOM的diff和patch都是在一次更新中自动进行的,我们无需手动操作DOM,极大提高开发效率
d: 跨平台多端开发
虚拟DOM本质上是JavaScript对象,而DOM与平台强相关,相比之下虚拟DOM可以进行更方便地跨平台操作,例如服务器渲染、移动端开发等等
缺点
无法进行极致优化
虽然虚拟 DOM + 合理的优化,足以应对绝大部分应用的性能需求,但在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化
实现原理
虚拟DOM本质上是JavaScript对象,是对真实DOM的抽象
状态变更时,记录新树和旧树的差异
最后把差异更新到真正的dom中
以上是关于react 虚拟dom的主要内容,如果未能解决你的问题,请参考以下文章