React快速入门之渲染

2023-12-27 17:55:13

【前置知识】什么是DOM？

  • 浏览器只会绘制（渲染）HTML或XML文档
<!DOCTYPE html>
<html>
<head>
    <title>我的网页</title>
</head>
<body>
    <header>
        <h1>欢迎来到我的网页</h1>
    </header>
    <main>
        <section>
            <p>这是一段内容。</p>
        </section>
    </main>
    <footer>
        <p>版权所有 &copy; 2022</p>
    </footer>
</body>
</html>

  • 浏览器会将HTML或XML文档解析为DOM🌲供JavaScript修改
    在这里插入图片描述

  • 浏览器会监听DOM🌲的变化，并在DOM树被修改后重新绘制（渲染）对应的部分。

React的初始渲染

  • React将元素渲染到同一个HTML文档中，其中id为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>
);

React修改DOM后渲染

<h1>{time}</h1>标签每秒钟都会重新渲染，但是<input />不会重新渲染，可以正常输入。因为React只会重新渲染由javascript修改的DOM，而没有修改的DOM不会被修改！

export default function Clock({ time }) {
  return (
    <>
      <h1>{time}</h1>
      <input />
    </>
  );
}

文章来源:https://blog.csdn.net/weixin_47251999/article/details/135249629
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。