08-JSX原理-虚拟DOM到真实DOM

网页大神经
41 阅读1分钟

接上篇，通过React.crateElement创建出来的是一个reactElement对象，它是一个js Object类型的对象，在控制台打印，如下图，描述了节点之间的嵌套关系，形成了一个关于节点嵌套的js对象树，我们称之为虚拟DOM

image.png

image.png

虚拟DOM如何转化成真实DOM

image.png

虚拟DOM作用，主要有两点：

  1. 让我们再更新数据的时候，没必要重新渲染整个模块

image.png 如上如，render依赖message，当message变化，我们重新调用render函数，调用react.createElement生成一个新的reactElement对象，新旧reactElement diff对比，小范围更新真实DOM

  1. 虚拟DOM能做跨平台，通过临时的reactElement对象，既可以在web端做渲染，也可以通过桥接技术，渲染成原生手机端的东西

image.png

官方描述的虚拟DOM好处

image.png

avatar
文章
阅读
粉丝