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

最新推荐文章于 2024-07-24 18:28:01 发布

啦c啦嗖

最新推荐文章于 2024-07-24 18:28:01 发布

阅读量113

点赞数

文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_66501371/article/details/128815904

版权

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语法规范

1.定义虚拟DOM时不要用引号

let VDOM = <h1>hello world</h1>

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

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

3.className样式的类名

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

4.内联样式用style={{}}

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

5.只有一个根标签

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

6.标签必须闭合

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

7.标签首字母

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