笔记二、React为什么要使用JSX?

野性酷女 2024-05-01 16:22 85阅读 0赞

定义

*  全称 JavaScript XML，是一种嵌入式的类似XML的语法扩展

>     XML是用于储存和传输数据，例如微信登录
>     现在普遍使用JSON储存和传输

React为什么要使用JSX

*  jsx是js创建虚拟dom的语法糖，提高开发效率

<body>
    <div id="root"></div>
    
    <script
            crossorigin
            src="https://unpkg.com/react@18.2/umd/react.development.js"
    ></script>
    
    <script
            crossorigin
            src="https://unpkg.com/react-dom@18.2/umd/react-dom.development.js"
    ></script>
    
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    
    <script type="text/babel">
    
        // 原生 js 写法
        // 1.创建虚拟dom 原生 js 写法
        // const vdom = React.createElement("div", {id:'lqy'}, "hello react")
        // 多层嵌套,原生 js 写法就不靠谱了
        // const vdom = React.createElement("div", {id:'lqy'}, React.createElement("h1",{},"hello react"))
    
        // jsx 写法
        // 1.创建虚拟dom
        // const vdom = <div id="lqy"> hello react </div>;
        // 多层嵌套, jsx 写法很直观
        const vdom = <div id="lqy"> <h1>hello react</h1> </div>;
    
        // 打印查看 dom 内容
        const TDOM = document.getElementById('root')
        console.log("虚拟 dom vdom->",vdom);
        console.log("真实 dom TDOM->",TDOM);
    
        // 2.找到容器，将虚拟dom渲染到页面中
        const root = ReactDOM.createRoot(document.getElementById("root"));
        root.render(vdom);
    </script>
    </body>

发表评论取消回复

表情：

评论列表（有 0 条评论，85人围观）

还没有评论，来说两句吧...

相关阅读

相关笔记二、React为什么要使用JSX?

全称 JavaScript XML，是一种嵌入式的类似XML的语法扩展。XML是用于储存和传输数据，例如微信登录。现在普遍使用JSON储存和传输。React为什么要使用JSX。

野性酷女/ 2024年05月01日 16:22/ 0 赞/ 86 阅读

相关 React（二）—— JSX

前言现在我们知道了 React 是什么，让我们来看看本系列其余部分将会出现的一些术语和概念。在上一篇文章中，我们研究了 React 是什么，并在高层讨论它是...

小灰灰/ 2024年04月17日 13:52/ 0 赞/ 96 阅读

相关【React】JSX语法

目录一、前言二、JSX介绍三、JSX原理 1、DOM结构示例 2、HTML的JSX结构示例 3、编译之后的

桃扇骨/ 2023年10月16日 14:08/ 0 赞/ 77 阅读

相关 react jsx语法

//调用react下面的createElement方法，传入第一个参数是tag //第二个是属性，第三个是子元素集合 import React

港控/mmm°/ 2023年07月06日 11:34/ 0 赞/ 70 阅读

相关 React学习笔记一——JSX语法规则

> 之前看过两遍关于react基础的视频，每次看完感觉非常懂，但是过一段就会忘记，所以这次再学习自己会做一些笔记记录下来，方便日后的学习，如果对你有帮助，再好不过；通过以下

迈不过友情╰/ 2022年10月09日 00:34/ 0 赞/ 253 阅读

相关浅谈React的JSX语法（二）

1、JSX的新语法——展开属性如果事先知道组件需要的全部props（属性），可以列出；但如果事先不知道要设置哪些 props，最好不要设置它，原因有两个： ①　React

- 日理万妓/ 2022年06月17日 12:52/ 0 赞/ 277 阅读

相关 React学习 -- JSX

React为了方便组件化，需要构建HTML结构化页面。那么React是如何操作的呢？答案是，React通过创建与更新虚拟元素来管理整个虚拟DOM。虚拟DOM是什么：由于DO

秒速五厘米/ 2022年06月17日 11:49/ 0 赞/ 263 阅读

相关 React之JSX

React JSX React 使用 JSX 来替代常规的 JavaScript。 JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。我们不需

心已赠人/ 2022年04月16日 03:46/ 0 赞/ 311 阅读

相关 React-Native项目为什么要使用redux

对于一些页面较多、功能复杂，组件之间交互频繁且结构复杂的App，通过修改state的方式重新渲染页面,就会出现卡到爆炸的效果，这时就要使用redux了。下面,我们来看一下使

淡淡的烟草味﹌/ 2021年12月20日 06:49/ 0 赞/ 416 阅读

相关 react jsx语法

jsx语法 (1)遇到{}按照js语法解析,无<>时也按照js语法解析 (2)遇到<>按照html语法解析 (3)遍历时,每一个

ゝ一世哀愁。/ 2021年07月24日 15:17/ 0 赞/ 527 阅读