jsx的解读

已于 2023-05-07 22:03:35 修改
阅读量146 收藏
点赞数
分类专栏： react 文章标签： reactjs 前端 javascript 前端框架
于 2023-04-18 21:08:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41736303/article/details/125845241
版权

目录

1.何为jsx？本质是什么？

2.jsx语法如何在javascript中生效？

3.JSX如何映射为DOM的？

4.解析ReactElement:起到一个组装作用

1.何为jsx？本质是什么？

react官方解释是：《jsx是javascript的一个语法扩展，和模板语言很接近，它充分具备javascript的能力》

jsx的本质是React.createElement的javascript语法糖，（React.createElement()返回一个叫做"React Element"的js对象)，jsx允许前端开发者用我们最为熟悉的类html标签语法来创建虚拟dom，降低了学习成本的同时也提升了研发效率和研发体验。

2.jsx语法如何在javascript中生效？

通过babel编译将代码处理成浏览器可以兼容的方式，相当于“—扩展”

3.JSX如何映射为DOM的？

起底于react.createElement源码,如下图

拆解为以下步骤：

总结就是：参数中介的作用

React.createElement是开发者和ReactElement调用之间的转换器，一个数据处理层，可以从开发者处接收简单的参数，如下图

然后将这些参数按照ReactElement的预期做一层格式化，最终通过调用 ReactElement来实现元素的创建。

4.解析ReactElement:起到一个组装作用

把开发者传进来的参数按照一定的规范组装成ReactElement对象，并把它返回给React.createElement，然后React.createElement又把它交回给开发者手中，过程如下图所示

它的本质是：以javascript的对象形式存在的对dom的描述，也就是虚拟dom，和真实dom相比；是通过ReactDOM.render来填补的。

为什么这么说？ 举例如下

 

以上总结就是：

vae_lee
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jsx理解
gercke的博客
10-11 290
jsx学习 JSX 其实会被转化为普通的 JavaScript 对象。 function getGreeting(user) { if (user) { return <h1>Hello, {formatName(user)}!</h1>; } return <h1>Hello, Stranger.</h1>; } 其中jsx中可以含有双标签也可以含有单标签 jsx顶层只能有一个根元素，很多时候我们会在外层包裹一个div r
JSX 解析
LuckXinXin的博客
04-24 313
JSX 其实是语法糖 开发环境会将 JSX 编译成 JS 代码 JSX 的写法大大降低了学习成本和编码工作量 同时，JSX 也会增加 debug成本 JSX 独立的标准 JSX 是 React 引入的，但不是 React 独有的 React已经将它作为一个独立标准开放，其他项目也可用 React.createElement 是可以自定义修改的 说明：本身功能已经完备；和其他标准监控和扩展性没问题 ...
JS加密/解密之jsx解密分析
mxd01848的博客
10-30 2176
​ 有朋友找到我，说有一份没见过的js加密，后缀为.jsx格式的文件找到我让我来帮忙还原成源代码。想要了解的可以去jsjiami官网找客服。
简单了解一下jsx的本质与原理
badbaby52906的博客
11-03 244
jsx本质是语法糖。通过转化成React.createElement('div',{class:'active'},[子元素])的函数调用，生成虚拟dom树，最后生成真实dom树。
说说对jsx的理解
qq_45050083的博客
12-30 476
JSX:可理解成html，经过Bable就是运行在浏览器上的代码了。 在原生中，js创建dom用 var a = document.createElement(‘p’); a.setAtribute(‘class’,‘myp’); a.appendChild(document.createTextNode(‘pp’)); pp 而在react中， var a = React.createElement(‘a’,{ class:‘link’ }, ‘pp’) 第一个参数：为元素节点 二
babel-plugin-transform-incremental-dom:将JSX变成IncrementalDOM
05-02
将JSX转换为 。 例子 在 export default function render ( data ) { var header = data . conditional ? < div> : null ; var collection = data . items . map ( ( item ) => { return ...
virtual-dom：关于Vue，React，Preact和Omi等框架源码的解读
02-06
JSX中的元素被编译为React.createElement()调用，生成虚拟DOM节点。React使用虚拟DOM进行组件状态变化后的DOM更新，确保高效且精确。 Vue则是在React的基础上进一步优化了虚拟DOM。Vue的模板语法同样可以被转换为...
源码解析之rc-field-form解读与实现
09-04
**源码解析之rc-field-form解读与实现** `rc-field-form`是React社区中一个流行的表单库，它提供了一种高效、灵活的方式来处理复杂的表单逻辑和数据管理。在本文中，我们将深入探讨`rc-field-form`的核心概念、工作...
Vue3.0全家桶抢先体验(Sam大佬解读)
01-08
Vue 3.0 全家桶抢先体验 1.vue: Beta 2.vue-router: Alpha 3.vuex: Alpha ...9.jsx: WIP 可以看到 Vue 3.0 beta 版本是一个项目系列，包含了我们在开发过程中需要的套件、webpack 插件等等，本文将带大家快速搭
blog源码java-blog:CentOS服务器配置，NodeJs项目配置，开发随笔，react源码解读,vue源码解读，架构分析，性能优化
05-19
React是由Facebook开发的组件化UI库，它的虚拟DOM和JSX语法为高效渲染提供了便利。Vue则以其简洁易用的API和良好的社区支持受到欢迎。解读这两个框架的源码，能帮助我们理解它们的工作原理，从而更好地利用它们来...
认识 JSX
huaqi_的博客
01-20 391
JSX 是什么、JSX 规范、React 为什么使用 JSX、JSX 注释书写、JSX 嵌入常用数据类型、JSX 嵌入函数表达式
React源代码解析（1）：jsx语法是如何解析
weixin_34227447的博客
11-16 1004
首先我们来看看下面的代码 import "react" from "react"; const element = (&lt;div&gt; &lt;div&gt; &lt;span&gt;1&lt;/span&gt; &lt;span&gt;2&lt;/span&gt; &am
JSX解析
weixin_45819276的博客
11-05 1488
什么是JSX JSX是JavaScript XML,是React提供的Syntax Sugar, 能让我们可以在JS中写html标记语言。 1、可以在常规的html代码标签中插入**任意有效的JS表达式(包括函数）**无需加上$ <div>{函数名(参数props)}</div> 2、JSX编译后是一个函数调用，返回值为JS对象，所以JSX也可以作为表达式 3、在标签中添加属性，属性值为字符串时使用""，为对象或表达式时使用{}，key采用驼峰命名，另外添加自定义需要渲染的属性，最
React之jsx语法原理解析
lulu_678的博客
03-10 1880
React是用于构建用户界面的 JavaScript 库，相当于MVC里面的V(view)，但又不完全是view。组件化是它的一个显著特点，而jsx是一种对javascript的扩展。jsx用的频率很高，但搞懂它的运作原理估计很少人去探索，那么今天就来一起探索一下，为什么要有这种语法，它是经过怎么样的转化变成页面的元素的。 什么是jsx? 本质上来讲，JSX 只是为 React.createEle...
react源码分析：babel如何解析jsx
weixin_59558923的博客
10-19 679
不管是类组件还是函数组件，最终我们写的jsx都被babel转化成了可识别的元素，其中我们也看了,,Component等内部实现，了解到了作为他是怎么被创建的，但是远远没有完，因为我们知道我们在写React的时候，会在后面带上一个，没错我们下一章节就要去探索一下方法了。
React原理解密
liuyuhua666的博客
07-19 914
1. setState() 的说明 1.1 更新数据 setState() 是异步更新数据的 注意：使用该语法时，后面的 setState() 不要依赖于前面的 setState() 可以多次调用 setState() ，只会触发一次重新渲染 this.state = { count: 1 } this.setState({ count: this.state.count + 1 }) co...
Javascript加密解密
jsx112的专栏
02-21 1005
//str 是想加密的字符串 //pwd 是key function encrypt(str, pwd) {     if (pwd == null || pwd.length &lt;= 0) {         alert("Please enter a password with which to encrypt the message.");         return nul...
JSX语法详解
热门推荐
王浴昊
12-02 8万+
JSX语法详解 本文在官方文档的基础上，进行了扩展扩展补充和一些解读。基本涵盖了JSX语法的细枝末节，JSX语法本身并不复杂，也容易掌握。本文供学习参考使用。 一、基础1、JSX是什么JSX是一种像下面这样的语法：const element = <h1>Hello, world!</h1>;它是一种JavaScript语法扩展，在React中可以方便地用来描述UI。本质上，JSX为我们提
jsx的简单使用教程
jackwang的博客
07-26 4566
一、jsx语法是什么？ JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到 二、我们能用jsx语法干点什么？ 在没有接触react之前，我是一点都没有了解过jsx语法的任何特性，我了解该语法完全是为了学习react，所以对于我个人来说，用jsx语法就是为了学习react也不算过分 三、jsx语法的学
jsx camera
最新发布
01-02
JSX相机是一种摄像设备，它采用数字技术来拍摄图像和录制视频。它通常具有高像素的传感器，可以捕捉清晰的图像和细节。它还可以具有光学变焦功能，使用户能够进行远距离拍摄，并获得更清晰的图像。此外，JSX相机可能...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值