说说react 中jsx语法糖的本质？

最新推荐文章于 2023-11-30 20:35:49 发布

晚时之秋

最新推荐文章于 2023-11-30 20:35:49 发布

阅读量114

点赞数

分类专栏： React 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_66557048/article/details/128584136

版权

React 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

JSX本质

jsx本质就是下面这个函数React.createElement的语法糖，所有的jsx语法都会最终经过babel.js转化成为React.createElement这个函数的函数调用
React.createElement(component,props,…children)函数
参数1：type
type表示当前element的类型
如果是HTML标签，直接写字符串类型的标签名即可，如’div’,‘span’,'a’等
如果是组件元素，直接写组件名称即可,如App,Loading
参数2：config
config以对象键值对的形式表示当前element的属性，如css属性，元素内置属性等等
参数3：children
children表示存储在元素中的内容，以children数组的方式进行存储

一.基本概念

React 使用 JSX 来替代常规的JavaScript。
JSX 是按照 XML 语法规范的 JavaScript 语法扩展。
JSX 语法的本质：并不是直接把 JSX 渲染到页面上，而是内部先转换成了 createElement 形式，再渲染的。

二.JSX语法的优点

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化；
它是类型安全的，在编译过程中就能发现错误；
使用 JSX 编写模板更加简单快速。

三.JSX语法规范

定义虚拟DOM时不要用引号
```
let VDOM = <h1>hello world</h1>
```

标签混入JS表达式需要用{ }

let str  = "hello world!";
let VDOM = (
 	<h1>{str}</h1> 
)

className样式的类名

javascript：
<h1 class='script'></h1>
jsx:
let VDOM = (
        <h1 className='react'>hello world</h1>
)

内联样式用style={{}}

<span style={{height:'20px',width:'50px',color:'red'}}></span>

只有一个根标签

<div id='root'></div>
 // 定义虚拟dom 
const VDOM =(
    <div>
    	<p className="sname">张三</p>
    </div>
)
ReactDOM.render(VDOM, document.getElementById('root'));

标签必须闭合

javascript:
<input type="text" name="" value=""/>
jsx:
<input type="text" name="" value=""></input>

标签首字母

1.若小写字母开头,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则报错。
html标签：<body></body>,<div></div>
报错：<res></res>
2.若大写字母开头,react就去渲染对应组件,若组件没有定义,则报错。
import Login from './component/login'
组件：<Login />
报错：<Store /> //组件未定义

晚时之秋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
说说react 中jsx语法糖的本质？

jsx本质就是下面这个函数React.createElement的语法糖，所有的jsx语法都会最终经过babel.js转化成为React.createElement这个函数的函数调用。JSX 语法的本质：并不是直接把 JSX 渲染到页面上，而是内部先转换成了 createElement 形式，再渲染的。children)函数。config以对象键值对的形式表示当前element的属性，如css属性，元素内置属性等等。如果是HTML标签，直接写字符串类型的标签名即可，如’div’,‘span’,'a’等。
复制链接

扫一扫