React学习-虚拟DOM

最新推荐文章于 2024-10-15 09:57:04 发布

原味的你

最新推荐文章于 2024-10-15 09:57:04 发布

阅读量102

点赞数 1

本文链接：https://blog.csdn.net/weixin_43005178/article/details/109112971

版权

React 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

React学习-虚拟DOM

原生js

<!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="app"></div>
</body>
<script>
    setInterval(function(){
        var str = new Date().toLocaleTimeString();
        var com =`
            <h1>现在的时间是</h1>
            <p>${str}</p>
        `;
        document.getElementById('app').innerHTML = com;
    },1000);
</script>
</html>

在这里插入图片描述
可以看到原生js生成的dom是所有的标签，在定时器事件触发到的时候全部重新渲染。

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="app"></div>
</body>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
    function clock(){
        let ele =(
            <div>
                <h1>现在的时间是</h1>
                <p>{new Date().toLocaleTimeString()}</p>
            </div>
        );
        ReactDOM.render(ele,document.getElementById('app'))
    }
    setInterval(clock,1000);
</script>
</html>