DOCTYPE html>
<html>
<head>
<title>我的网页title>
head>
<body>
<header>
<h1>欢迎来到我的网页h1>
header>
<main>
<section>
<p>这是一段内容。p>
section>
main>
<footer>
<p>版权所有 © 2022p>
footer>
body>
html>
root
的div是React应用元素挂载点!DOCTYPE html>
<html lang="en">
......
<body>
......
<div id="root">div>
body>
html>
root
标签,并创建为React应用的根DOM节点** 创建根DOM节点
const root = ReactDOM.createRoot(document.getElementById('root'));
** 让浏览器从root根DOM节点开始渲染
root.render(
<React.StrictMode> // 严格模式
<App /> // 根组件
</React.StrictMode>
);
标签每秒钟都会重新渲染,但是{time}
不会重新渲染,可以正常输入。因为React只会重新渲染由javascript修改的DOM,而没有修改的DOM不会被修改!
export default function Clock({ time }) {
return (
<>
<h1>{time}</h1>
<input />
</>
);
}