react初学--jsx与js的写法，区别于联系_jsx和js区别

作者：你好赵伟 | 2024-04-27 02:51:37

踩

jsx和js区别

react书写方法有两种一种是jsx一种是js。

用最简单的html页面结构举例。

初始页面结构如下：引入react核心库，和react的dom库。核心库必须先引入。


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="react.development.js"></script>
    <script type="text/javascript" src="react-dom.development.js"></script>
</head>
 
<body>
  <div id="app"></div>
</body>
 
</html>

假设我们实现一个这个效果：

js写法：


<script type="text/javascript">
//1、创建虚拟dom：React.createElement(元素，属性，元素内容)；
const vdom=React.creactElement('div',{id:'div1'},React.createElement('span',{},'this is a div'))
//2、渲染虚拟dom:ReactDOM.render(虚拟dom，位置);
ReactDOM.render(vdom,document.getElementById('app'))
 
</script>

jsx写法：(在jsx中必须引入babel.min.js)


<script type="text/babel">//text/babel:表示这里写的是jsx,用babel转换
//1、创建虚拟dom：
const vdom=<div id='div1'><span>this is a div</span></div>;//直接写标签即可，不要加引号，因为不是字符串；
//2、渲染虚拟dom:ReactDOM.render(虚拟dom，位置);
ReactDOM.render(vdom,document.getElementById('app'))
 
</script>

js与jsx的区别：

创建虚拟dom的时候写法不同，js通过react特有的api创建，jsx是直接写html。

js与jsx的联系：

渲染虚拟dom方式相同；
jsx中babel转换的就是虚拟dom，转换后就是js通过调用react的api创建的虚拟dom；因此可以把jsx创建虚拟dom的方式看为js创建虚拟dom的语法糖。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/494403