React快速入门之渲染

【前置知识】什么是DOM?

  • 浏览器只会绘制(渲染)HTML或XML文档
DOCTYPE html>
<html>
<head>
    <title>我的网页title>
head>
<body>
    <header>
        <h1>欢迎来到我的网页h1>
    header>
    <main>
        <section>
            <p>这是一段内容。p>
        section>
    main>
    <footer>
        <p>版权所有 © 2022p>
    footer>
body>
html>
  • 浏览器会将HTML或XML文档解析为DOM供JavaScript修改
    React快速入门之渲染_第1张图片

  • 浏览器会监听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后渲染

{time}

标签每秒钟都会重新渲染,但是不会重新渲染,可以正常输入。因为React只会重新渲染由javascript修改的DOM,而没有修改的DOM不会被修改!

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

你可能感兴趣的:(React,react.js,javascript,前端)