React性能优化：虚拟DOM与原生DOM操作对比-CSDN博客

本文链接：https://blog.csdn.net/weixin_45969726/article/details/125061889

1.react 引入方法

<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>

2.react 与原生DOM的对比

html 代码

<body>
    <div class="main"></div>
    <button id="btn1">原生JS创建</button>
    <button id="btn2">React创建</button>
</body>

2.1 原生js操作DOM

知识点

（1）let E = document.querySelector(‘E’); 获取页面元素

（2）let E = document.createElement(“E”); 创建新的元素

（3）E.innerText = 内容; 在元素E中填充内容

（4）父元素.appendChild(要追加的子元素);

    //获取页面元素
    let main = document.querySelector('.main');
    let btn1 = document.querySelector('#btn1');
    //定义一个数组 进行数据的初始化
    let infos = ["HTML", "CSS", "JS"];
    //创建一个ul 用来存放li
    let ul = document.createElement("ul");
    //遍历数组infos,循环创建li 
    infos.forEach((course) => {
       //创建li
        let li = document.createElement("li");
        //li里面填充内容
        li.innerText = course;
        //将li追加到ul中
        ul.appendChild(li);
    });
    //将ul追加到div中
    main.appendChild(ul)
    
   //btn1的点击事件
    btn1.onclick = () => {
        // 全部改变
        // main.innerHTML = "";//先将div中的内容清空，防止追加多个ul
        // let ul = document.createElement("ul");//创建一个ul 用来存放li
        // infos.forEach((course) => {//遍历数组infos,循环创建li ,重复上面的操作
        //     let li = document.createElement("li");
        //     li.innerText = course;
        //     ul.appendChild(li);
        // });
        // main.appendChild(ul);

        // 只改变某一项内容
        let lis = document.querySelectorAll('li');//获取到页面中的所有li元素
        lis[0].innerText = "JAVA";//将第一个li中的内容改变
    }

2.2 react 操作DOM

知识点

（1）React.createElement(“元素名称”, 元素属性, 元素内容1, 元素内容2, 元素内容3…); 这里床件的元素不是原生DOM元素，而是一个React 特有的元素

（2） ReactDOM.render(元素, 渲染的位置);

（3）btn2.onclick = () => {}; 当页面元素使用 id 时，在使用过程中，可以不获取，直接进行使用

    let users = ["小明", "小红", "小李"];
    let lis = [];
    users.forEach((uname) => {
        let li = React.createElement("li", null, uname);
        lis.push(li)
    });
    // 这里创建的不是原生DOM元素，而是一个React特有的元素
    let ul = React.createElement("ul", null, lis[0], lis[1], lis[2]);
    // 最终，将创建好的React 元素，渲染到div中
    ReactDOM.render(ul, document.querySelector('.main'));
    // 点击事件
    btn2.onclick = () => {
        let lis = [];
        users.forEach((uname, i) => {
            let li;
            if (i == 0) {
                li = React.createElement("li", null, '张三');
            } else {
                li = React.createElement("li", null, uname);
            }
            lis.push(li);
        });
        let ul = React.createElement("ul", null, lis[0], lis[1], lis[2]);
        ReactDOM.render(ul, document.querySelector('.main'));
    }