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

ElendaLee

已于 2023-10-25 15:27:57 修改

阅读量46

点赞数

分类专栏： # React 文章标签： react.js 前端前端框架

于 2023-10-25 15:04:04 首次发布

本文链接：https://blog.csdn.net/ElendaLee/article/details/134035290

版权

React 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

本文介绍了JavaScriptXML(JSX)在React框架中的作用，它是JS创建虚拟DOM的语法糖，通过直观的jsx语法提高开发效率。文章展示了jsx如何创建虚拟DOM并将其渲染到页面上，以及ReactDOM操作的重要性。

摘要由CSDN通过智能技术生成

定义

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

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

React为什么要使用JSX

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

<body>
<div id="root"></div>
<!-- 引入react的核心库 -->
<script
        crossorigin
        src="https://unpkg.com/react@18.2/umd/react.development.js"
></script>
<!-- 引入react-dom用于支持react操作dom -->
<script
        crossorigin
        src="https://unpkg.com/react-dom@18.2/umd/react-dom.development.js"
></script>
<!-- 引入babel转换jsx为js -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- jsx 写法 -->
<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>