React入门：虚拟DOM与JSX解析-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42958871/article/details/108359689

本文介绍了React的基本概念，包括虚拟DOM如何帮助减少DOM操作，DOM Diff策略以及React中JSX的使用。通过babel.js将JSX转译为JavaScript代码，以确保在浏览器中的正确运行。同时，提到了虚拟DOM与真实DOM的一一对应关系，并提供了JSX的实践练习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

虚拟DOM，不总是直接操作DOM
DOM Diff，最小化页面重绘

初识React

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <!-- 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 操作DOM的扩展库 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 解析JSX语法代码转为纯JS语法代码库 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
    //1、创建虚拟DOM元素对象
    var vDom = <h1>Hello React!</h1>
    //2、将虚拟DOM渲染到页面真实DOM容器中
    ReactDOM.render(vDom, document.getElementById('test'))
    </script>
</body>
</html>

在这里插入图片描述
创建虚拟DOM的两种方式

 <script type="text/babel">
        const msg = 'I Like You!'
        const myId = 'Atguigu'
        //创建虚拟DOM
        // var element = React.createElement('h1',{id:'myTitle'},'hello')
        //方式一（原始纯js方式---不建议使用）
        const vDom1 = React.createElement('h2',{id:myId.toLowerCase()},msg.toUpperCase())
        //渲染虚拟DOM
        ReactDOM.render(vDom1,document.getElementById('test1'))
     </script>
     <script type="text/babel">
        //创建虚拟DOM
        //方式二（JSX语法babel进行转换）
        const vDom2 = <h3 id={myId.toUpperCase()}>{msg.toLowerCase()}</h3>
        //传染虚拟DOM
        ReactDOM.render(vDom2,document.getElementById('test2'))
     </script>

babel.js的作用
浏览器不能直接解析JSX代码，需要babel转译为纯JS的代码才能运行
只要用了JSX，都要加上type=“text/babel”，声明需要babel来处理
在这里插入图片描述
虚拟DOM对象最终都会被React转换为真实的DOM（为一一对应的关系）

JSX（javascriptXML）练习

<body>
    <h2>前端JS框架列表</h2>
    <div id="examplel"></div>
    <!-- 核心库 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 操作DOM的扩展库 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 解析JSX语法代码转为纯JS语法代码库 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
        /*
          功能：动态展示列表数据
          */
        //如何将一个数据的数组转换为一个标签的数组（使用map()将一个数据数组转换为标签数组）
        const names = ['jQuery', 'zepto', 'vue']
        //1、创建虚拟DOM元素对象
        //需要注意的地方如有有嵌套行为需要用（）包裹如下
        const vDom1 = (<ul>{names.map((name,index) => <li key={index}>{name}</li>)}</ul>)
        //2、将虚拟DOM渲染到页面真实DOM容器中
        ReactDOM.render(vDom1, document.getElementById('examplel'))
    </script>
</body>

在这里插入图片描述