虚拟DOM和真实DOM区别和对比

一个小极客

已于 2023-12-11 15:32:48 修改

阅读量835

点赞数 23

文章标签： javascript 前端 react.js

于 2023-12-11 11:55:36 首次发布

本文链接：https://blog.csdn.net/dujintao1/article/details/134923575

版权

使用虚拟DOM的代码案例（使用React）

// 定义一个简单的组件
function MyComponent() {
  const [count, setCount] = React.useState(0);

  // 点击按钮时更新计数器
  const handleClick = () => {
    setCount(count + 1);
  };

  // 渲染组件
  return (
    <div>
      <h1>计数器：{count}</h1>
      <button onClick={handleClick}>点击增加</button>
    </div>
  );
}

// 将组件渲染到真实DOM中
ReactDOM.render(<MyComponent />, document.getElementById('root'));

使用真实DOM的代码案例

<!DOCTYPE html>
<html>
<head>
  <title>使用真实DOM</title>
</head>
<body>
  <div id="root">
    <h1>计数器：0</h1>
    <button onclick="handleClick()">点击增加</button>

    <script>
      let count = 0;
      
      // 点击按钮时更新计数器
      function handleClick() {
        count++;
        document.querySelector('h1').textContent = '计数器：' + count;
      }
    </script>
  </div>
</body>
</html>

以上代码展示了一个简单的计数器组件。在使用虚拟DOM的代码案例中，使用了React库，通过使用useState钩子来管理组件的状态，并使用JSX语法描述页面结构。在点击按钮时，只会更新虚拟DOM中的计数器值，然后React会根据差异更新真实DOM中的相应部分。

而在使用真实DOM的代码案例中，我们直接使用JavaScript来操作真实DOM。在点击按钮时，通过querySelector找到对应的<h1>元素，并更新其textContent来改变计数器的值。

可以看到，使用虚拟DOM的代码相对简洁和直观，而且只更新了需要改变的部分，提高了性能。而使用真实DOM的代码则相对繁琐，需要手动操作DOM来更新页面。

一个小极客

关注

23
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
虚拟DOM和真实DOM区别和对比

钩子来管理组件的状态，并使用JSX语法描述页面结构。在点击按钮时，只会更新虚拟DOM中的计数器值，然后React会根据差异更新真实DOM中的相应部分。可以看到，使用虚拟DOM的代码相对简洁和直观，而且只更新了需要改变的部分，提高了性能。而使用真实DOM的代码则相对繁琐，需要手动操作DOM来更新页面。而在使用真实DOM的代码案例中，我们直接使用JavaScript来操作真实DOM。在使用虚拟DOM的代码案例中，使用了React库，通过使用。使用虚拟DOM的代码案例（使用React）使用真实DOM的代码案例。
复制链接

扫一扫