React JSX 的本质是什么？

最新推荐文章于 2024-03-13 08:13:27 发布
最新推荐文章于 2024-03-13 08:13:27 发布
阅读量436 收藏 1
点赞数
分类专栏： React 笔记 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/josavion/article/details/113558121
版权
笔记 同时被 2 个专栏收录
36 篇文章 3 订阅
订阅专栏
React
10 篇文章 0 订阅
订阅专栏

JSX 的本质就是一个 React.createElement 函数，他接收多个参数来返回 Vnode；

  1. 第一个参数是标签名
    1. 可能是原生的 HTML 标签名，是一个小写字母开头的字符串；
    2. 可能是一个自定义的组件，React 规定自定义组件以大写字母开头；
  2. 第二个参数是属性信息，如果没有属性则为 null；
  3. 第三个参数是子元素；
    1. 如果拥有多个子元素，可以依次放在第三个、第四个...
    2. 也可以用在数组中存放多个子元素

josavion
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React精讲（三）jsx本质源码分析
weixin_45704555的博客
11-01 592
前面两讲讲到了react的书写方法，也讲到必须引入babel且在script标签上加上一个type="text/babel"的属性，jsx才能被执行。那么这一讲，我们将深入到 jsx的本质，具体了解jsx的来龙去脉。 jsx本质 实际上, jsx仅仅只是React.createElement(component, props, …children) 函数的语法糖。 语法糖：“生活有了糖会更甜，没有还是照样过”，上面这句话很形象地讲到了语法糖的作用，它是将一个较为复杂的代码封装成一个供开发者简单使用的形式，
react学习记录-JSX原理
华工Web练习生
06-25 401
JSX 原理 JSX的设计是为了能够方便用JavaScript来描述HTML标签，React.js 把 JavaScript 的语法扩展了一下，让 JavaScript 语言能够支持，这种直接在 JavaScript 代码里面编写类似 HTML 标签结构的语法，这样写起来就方便很多了。 编译的过程会把类似 HTML 的 JSX 结构转换成 JavaScript 的对象结构。 比如说下面一份React代码： import React, { Component } from 'react' import Rea
react之JSX本质
Yetian_2000的博客
09-23 293
Jsx是语法糖，实质是js函数，需要babel来解析，核心函数是React.createElement(tag,{attrbuties},children)，参数tag是标签名可以是html标签和组件名，attrbuties参数是标签的属性，children参数是tag的子元素。用来创建一个vnode，最后渲染到页面上。可以参考babel中文网试一试测试：babel测试地址 ...
JSX 的本质
qq_43262022的博客
06-17 631
JSX 的本质 JSX 本质其实是一个函数（createElement)。
JSX本质是什么
weixin_42790916的博客
01-14 1819
JSX语法 举几个例子 JSX中注释方式 {/*需要注释的内容*/} HTML标签在里面也都支持 可以在render中写判断 {show ? <img src=".....">}//如果show这个变量存在显示图片 否则不显示 在render中循环 &am
jsx的本质
weixin_30916125的博客
06-26 317
jsx语法 1、所有html标签他都支持 <div></div> 2、大括号里面可以引入js变量 或者 表达式 {name || ''} 3、可以做判断 {show ? '' : ''} 4、可以循环 {list.map(item=>{ return <li>{item}&...
深入浅出 React：探究 JSX 本质
07-04 430
JSX（JavaScript XML）是学习React框架必须要了解的一个概念，虽然现在越来越多的人认可与支持 JSX 语法的框架（比如 Vue.js），但是当 React 首次带着 JSX 发布之时，还是引起了很多争议，甚至我的一个朋友大呼这是开历史倒车。随着 React 框架的不断完善，JSX 也被越来越多的开发者所认可，变得越来越流行，当得了一句“真香”！本次分享会从下面三个问题出发：JSX 是什么？JSX 作用是什么？JSX 背后做了哪些事情？在分享的过程中，我会通过一些 Demo 代码讲解以及..
react的jsx和React.createElement是什么关系？面试常问
beifeng11996的博客
02-27 152
参考前端进阶面试题详细解答// 最后返回一个调用ReactElement执行方法，并传入刚才处理过的参数 return ReactElement(type , key , ref , self , source , ReactCurrentOwner . current , props ,);
为什么React选择JSX？
HI_YIDan的博客
08-06 349
JSX的本质？和JS有什么联系？ JSX的本质是JavaScript 的一种语法扩展，它和模板语言很接近，但是它充分具备 JavaScript 的能力 为什么选择JSX？ JSX 语法糖允许前端开发者使用我们最为熟悉的类 HTML 标签语法来创建虚拟 DOM，在降低学习成本的同时，也提升了研发效率与研发体验 JSX执行过程？ JSX 会通过babel编译为React.createElement()， React.createElement() 将返回一个叫作“ReactElement”的
React简介、JSX语法详解
Darlingmi的博客
09-25 388
一、React简介 1、是一个JavaScript的库,目的是简化用户界面的开发。 2、是基于JSX(JavaScript Xml)语法,可以和html、js混合书写。 3、核心是组件,可以实现用户界面的模块化开发,代码的复用率高、可维护性好。 4、是Facebook公司开发,2013年发布。 二、React的开发过程 1、导入js文件 <script src="../js/react.development.js"></script> <!-- React的核心库 --&gt
react-当检测到的JSX时自动导入React
08-15
React库的核心是`React.createElement`函数，JSX本质上是这个函数的语法糖。当我们编写JSX时，编译器会将其转化为`React.createElement`调用。例如，以下JSX代码： ```jsx const element = <h1>Hello, world!; ``` ...
3、JSX的本质
JasonJust博客站
01-30 118
JSX的本质 createElement传递三个参数 频繁操作DOM的问题 声明式编程
说说react 中jsx语法糖的本质？
weixin_66501371的博客
01-31 143
react 中jsx语法糖的本质
【react】react的jsx 的本质？
呆呆狗
10-09 136
JSX => createElement 函数 => ReactElement (对象树) => ReactDOM.render => 真实的DOM 1 JSX基本使用 实际上，JSX 仅仅只是 React.createElement(component,props,…children) 函数的语法糖 所有的 jsx 最终都会被转换成 React.createElement 的函数调用 React.createElement 需要传递的参数 参数一：type 当前 Rea
react中JSX的详解
最新发布
精通前端技术，了解后端接口
03-13 1259
JSX与JavaScript的关系可以说是相辅相成。JSX为JavaScript提供了一种更为直观和易读的组件描述方式，而JavaScript则为JSX提供了丰富的功能和灵活性。具体来说，JSX可以被看作是JavaScript对象的一种语法糖，它最终会被转换成JavaScript对象。JSX是JavaScript XML的缩写，是一种JavaScript的语法扩展。然而，JSX并不是真实的JavaScript，它最终需要通过Babel等编译器转换为纯JavaScript代码才能被浏览器解析执行。
JSX 本质是什么
LuckXinXin的博客
04-24 115
JSX 语法 html 形式 引入 JS 变量和表达式 循环 style 和 className 事件 JSX 语法根本无法被浏览器所解析 那么它如何在浏览器运行？
React基础-JSX的本质-虚拟DOM的创建过程
m0_71485750的博客
09-22 7940
在这个理念中，UI以一种理想化或者说虚拟化的方式保存在内存中，并且它是一个相对简单的JavaScript对象。**而ReactElement最终形成的树结构就是虚拟DOM (Virtual DOM) **;另外，在我们编写原生的React情况下，我们就不需要babel相关的内容了(所有jsx中的属性都在config中以对象的属性和值的形式存储;存放在标签中的内容，以children数组的方式进行存储;当然真实开发中我们是不会编写原生的React的。如果是组件元素，那么就直接使用组件的名称;
进一步了解jsx的本质
weixin_43933771的博客
07-15 232
所有的jsx代码最终都会被 babel 转为 react.createElment() 的函数调用。 const test1 = <h1>hello react</h1> const test2 = react.createElement(“h1”, null, “hello react”); ReactDOM.render(test1, document.getElementById("app")); 从上面的例子中，可以看出这个 react.createElement() 函
JSX的本质
kyooo0的博客
12-28 245
JSX 等同于 Vue 模板 (Vue模板不是html, JSX也不是JS) React.createElement(‘tag’, null, [child1, child2, child3]/也可以打散传入(不通过数组)) JSX本质 React.createElement() 即h函数, 返回vnode 第一个参数,可能是组件,也可能是html tag 组件名,首字母必须大写(React 规定) 第一个参数是List组件 => 找到List 组件jsx结构,继续拆分 ...
理解React：JSX与组件基础
JSX本质上是React.createElement()函数的语法糖，它允许我们在JavaScript中编写类似HTML的结构。当React应用运行时，JSX代码会被Babel转译器转换为React.createElement()函数调用，这个过程不仅提高了代码的可读性，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值