React快速入门之渲染

咕噜咕噜崩

已于 2023-12-28 18:41:08 修改

阅读量398

点赞数 5

分类专栏： React 文章标签： react.js javascript 前端

于 2023-12-27 16:33:17 首次发布

本文链接：https://blog.csdn.net/weixin_47251999/article/details/135249629

版权

React 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

【前置知识】什么是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 />
    </>
  );
}

咕噜咕噜崩

关注

5
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
React快速入门之渲染

浏览器会将HTML或XML文档浏览器会监听DOM🌲的变化，并在DOM树被修改后重新绘制（渲染）对应的部分。
复制链接

扫一扫

专栏目录

React快速入门之渲染

【前置知识】什么是DOM？

React的初始渲染

React修改DOM后渲染

“相关推荐”对你有帮助么？