【React】归纳篇（二）JSX使用与虚拟DOM

编程轨迹_

已于 2022-04-15 14:38:18 修改

阅读量407

点赞数

分类专栏： React | Vue 文章标签： React JSX 虚拟DOM

于 2018-08-30 21:00:29 首次发布

本文链接：https://blog.csdn.net/ImagineCode/article/details/82227774

版权

React | Vue 专栏收录该内容

30 篇文章 12 订阅

订阅专栏

在这里插入图片描述
先上示例，注意其中的注释：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="test1"></div>
    <div id="test2"></div>
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/javascript">
        const msg = 'I like react!'
        const myId = 'test';
        //**流程不变**
        //1、创建虚拟DOM-不使用jsx的情况
        const vDom1 = React.createElement('h2',{id:myId.toLowerCase()},msg.toUpperCase());
        debugger //打断点查看
        //2、渲染虚拟DOM
        ReactDOM.render(vDom1,document.getElementById('test1'));
    </script>

    <script type="text/babel">
        //**流程不变**
        //1、创建虚拟DOM-使用jsx的情况
        const vDom2 = <h3 id={myId.toUpperCase()}>{msg.toLowerCase()}</h3> 
        //**JSX写法标签不能加单/双引号，否则就成了字符串，其最终会转换成js对象**
        //2、渲染虚拟DOM
        ReactDOM.render(vDom2,document.getElementById('test2'));
    </script>
</body>
</html>

记住流程：

1、创建虚拟DOM
2、渲染虚拟DOM

为何要使用虚拟DOM？

虚拟DOM优势：

轻；
只在渲染时发生重绘，更改时不发生重绘。

JSX——javascript XML

可使用html标签；
还可使用自定义标签——组件标签；
注意：只要用了JSX，都加加上type="text/babel"

渲染虚拟DOM元素

语法： ReactDOM.render(virtualDOM,containerDOM);

建立虚拟DOM——2种方式

//第一种（不推荐）
const vDom = React.createElement('h1',{id:myId},msg);

//第二种（推荐）
const vDom = <h1 id='myId'>{msg}</h1>

若对虚拟DOM想进一步了解，可查看另一篇文章《浅析虚拟DOM》
点击查看《浅析虚拟DOM》

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>展示列表</h1>
    <h2>关键：将一个数据的数组转换为一个标签的数组——map()</h2>
    <div id="test1"></div>
   
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>

    <script type="text/babel">
        const arrs = ['react','vue','angular','jquery','backbone'];
        //流程不变
        //1、创建虚拟DOM
        const vDom_ul = (
            <ul>
                {
                    arrs.map((arr,index)=><li key={index}>{arr}</li>)
                }
                
            </ul>
        )
        //2、渲染虚拟DOM
        ReactDOM.render(vDom_ul,document.getElementById('test1'));
    </script>
</body>
</html>