JSX是如何转换成DOM的

3,951 阅读2分钟

以下内容如涉及到侵权,请联系我,我会尽快删除本文章。

jsx是一个什么东东?

  • 官方回答,jsx是js的扩展,并且具有js的所有能力

要知道jsx=>dom的过程,要先知道一个概念babel,那么babel又是个啥玩意儿?

  • babel是一个工具链,主要是将ECMAScript2015+以上版本的js转换为低版本的js,以便兼容低版本的浏览器或者环境

重头戏来了,jsx是如何转换为dom的

  • 这里需要有一大段话,看不懂没关系,下面会详细介绍

  • 大段话:babel会将jsx转换为我们所能认识的es5代码,即jsx=>react.CreateElement(type,element,value,children),之后react.CreateElement()会返回react.Element()的调用,并将一个处理好的对象传给react.element(),而react.element会返回一个element,即我们常说的虚拟dom,最终有render对返回的element(虚拟dom)进行渲染成真是dom。

  • 是不是很乱,下面我们将逐步解析

  1. NO.1,我们写了一个jsx并且在通过babel将其转换成es5如图,我们可以看清我们一个简单当然jsx被转换成了react.createElement(type,config,value,children)形式的函数,这里的type为标签节点、config为标签属性转化成的key-value形式的对象,value为值,chilred为子节点。

  2. 在createElement()函数中,函数会对形参进行逻辑处理,最终return一个ReactElement()方法,并传入一切参数,具体为:key、props、ref、type、ReactCurrentOwner.current、source、self.下面一段为我从react源码中截图的代码块。

  3. 在ReactElement()中对传进来的参数进行重新组装,最后返回一个对象,下面一段为我从react源码中截取的代码块。返回的对象为我们常说的虚拟dom。

  4. 最后有reactDOM.render()对返回的虚拟dom进行渲染,这样jsx就变成真实dom了。下面为我打印的jsx实例,可以看到reactElement返回的虚拟dom。注意是reactDOM.render()将虚拟dom转换为真是dom,并非组件中render()

这里另说一句,为什么我们不直接用CreateElement(),而是用jsx?

  • 因为jsx的结构更加接近html的写法,有利于开发

以上内容你是否懂了呢,如果不懂。。。