jsx代码如何变成dom
创始人
2024-01-28 16:59:53
0

jsx代码如何变成dom

  • 一、三个问题考察对jsx的理解
  • 二、jsx的本质以及它和js之间是什么关系?
    • 2.1 jsx是什么
    • 2.2 和js的关系
    • 2.3 jsx的本质
  • 三、为什么要用jsx?不用会有什么后果
  • 四、jsx背后的功能模块是什么?这个功能模块都做了哪些事情?
    • 4.1 createElement
      • 1.入参分析
      • 2.函数体拆解
    • 4.2 ReactElement
    • 4.3 虚拟dom和reactDom.render
    • 4.4 总结

一、三个问题考察对jsx的理解

  1. jsx的本质是什么,它和js之间是什么关系?
  2. 为什么要用jsx?不用会有什么后果
  3. jsx背后的功能模块是什么?这个功能模块都做了哪些事情?

二、jsx的本质以及它和js之间是什么关系?

2.1 jsx是什么

jsx是JavaScript的一种语法拓展,它和模板语言很接近,但是它充分具备JavaScript的能力。

2.2 和js的关系

因为jsx是JavaScript的拓展,所以直接决定了浏览器不会像天然支持JavaScript一样支持jsx。
但是既然jsx充分具备JavaScript的能力,那么jsx是如何在js中生效的呢?
其实在react官网中就给出了答案,jsx会被编译为React.createElement(),它将返回一个“React Element”的js对象。

编译这个动作是由Babel来完成的。Babel是一个工具链,主要用于将es2015+版本的代码转换为向后兼容的js语法,以便能够运行在当前和旧版本的浏览器或其他环境。

在babel官网中,可以看到编译前后的代码
[图片]

2.3 jsx的本质

当我们在写jsx时,实际上编译后就是React.createElement。
jsx的本质就是调用js中的React.createElement语法糖。

三、为什么要用jsx?不用会有什么后果

既然jsx等价于一次React.createElement调用,那么React官方为什么不直接引导我们用ReactElement来创建元素?

因为当jsx内容更多时,编译之后的代码会变得很复杂,嵌套不清晰

所以jsx语法糖允许我们使用最为熟悉的类HTML标签语法来创建虚拟DOM,降低学习成本的同时,也提升了研发效率和体验。

四、jsx背后的功能模块是什么?这个功能模块都做了哪些事情?

4.1 createElement

1.入参分析

export function createElement(type,config,children)

type:标识节点类型
config:以对象形式传入,组件所有的属性都会以键值对的形式存储在config中
children:以对象形式传入,它记录的是组件标签之间嵌套的内容

2.函数体拆解

[图片]

[图片]

createElement的步骤其实是在格式化数据。将开发传入的数据根据ReactElement的预期做一层格式化,最终调用ReactElement实现元素的创建。

4.2 ReactElement

主要做的事情就是组装ReactElement把传入的参数按照一定的规范,组装进Element对象里,然后返回给React.createElement,最后React.createElement交回给开发者手中。
[图片]

可以通过打印验证这一点。输出的确实是标准的ReactElement实例。本质是以js对象形式存在的对dom的描述,也就是虚拟dom。
[图片]

[图片]

4.3 虚拟dom和reactDom.render

既然是虚拟dom,那和渲染到页面上的真实dom一定是有差距的,它们之间的差距就是由reactDom.render方法来填补的。
reactDOM.render经常出现在项目的入口文件中。

reactDOM.render的入参分析[图片]

4.4 总结

jsx背后的功能模块的内容以及做了的事情:
1.通过babel将jsx代码编译为React.createElement的调用。

2.React.createElement将传入的参数包括type,config,children格式化为ReactElement预期的格式。

3.调用ReactElement后组装成ReactElement对象,返回给React.createElement,最终生成虚拟dom。

4.虚拟dom作为ReactDOM.render的入参,经过渲染处理生成真实DOM。
[图片]

相关内容

热门资讯

有哪些风口上适合个体创业的项目... 来源:耕叔说钱()作者:耕叔疫情之下,除了少数余粮较多的地主家庭,心理不慌以外。绝大多数人,是受影响...
这几个小生意项目 哪些风口项目... 2、农村合作医疗城市到处有医院,但农村刚好相反。看个病都是非常麻烦的事。所以农村开诊所也是一个非常不...
年轻人最适小本创业好项目首选合... 延伸阅读****'%年轻人%'年青人创业找项目年轻人六大创业好项目1574人年青人敢闯敢拼的精神才是...
小本创业的好项目 小本创业的好...   :野菜种植寻找一块城乡结合处土地,投资种植芦笋,芦蒿,马兰,荠菜等绿色食品,投资小,见效快,市场...
加盟小本创业项目 加盟小本创业... 首页商务服务详情加盟小本创业项目时间:2021-02-加盟小本创业项目一般大的商场***好采取可以保...
小本创业项目,休闲食品加盟! ... 生活水平的普遍提高同时也带动了潜力无限的休闲食品行业的发展,如今休闲食品在国内的年平均增长率达到了2...
个人创业做什么项目好 初涉商业... 关注上方网络营销渠道,学百集网络营销课个人创业做什么项目好?推荐5个小本创业项目!个人创业做什么项目...
适合小本创业五个的好项目 穷人... 如今生活中相信很多人都有一些爱拍照,爱留念的生活习惯,人们对智能设备的使用也已经非常的普及了,有一个...
小本创业15个好项目 小本创业... 为什么穷人多不敢去创业蛋糕创业蛋糕店创业30岁女人创业做什么适合女性创业的大学生适合什么创业毕业生如...
话费小本创业的项目 话费小本创... 小本创业项目:快餐小吃店话费小本创业的项目随着社会压力的增大,很多人没有时间本人做饭,为了工作会选择...