使用虚拟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来更新页面。