Web开发基础学习——理解React组件中的根节点

Web开发基础学习系列文章目录

第一章 基础知识学习之理解React组件中的根节点


文章目录


前言

在 React 应用中,根节点(Root Node)是指 React 组件树的起始点,也是 React 应用挂载到 DOM 的位置。根节点通常是一个 HTML 元素,React 应用会将其组件树渲染到这个元素中。

因为React应用不能单独存在,必须找到一个入口点,挂载上去,才能生长,渲染。所以有根节点的概念。


一、根节点的概念

根节点:是一个 HTML 元素,React 应用会将其组件树渲染到这个元素中。

挂载点:根节点也是 React 应用的挂载点,表示 React 应用在 DOM 中的起始位置。

二、示例解释

在你的 index.html 文件中,有一个 div 元素,具有 id="root":

这个html就是 React 应用运行时的基础 HTML 文件。React 应用会将其组件树渲染到这个 HTML 文件中的特定元素内,通常是一个具有特定 id 的 div 元素。

在 React 应用中,index.html 文件提供了一个基本的 HTML 结构,React 应用会将其组件树挂载到这个文件中的一个特定元素内。

  • html文件:
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React App</title>
</head>
<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>
</html>

这个 div 元素就是 React 应用的根节点。React 会将组件树渲染到这个 div 元素中。

  • 在 index.js 中创建根节点并渲染组件
    在 index.js 文件中,使用 ReactDOM.createRoot 创建根节点,并将根组件渲染到这个节点中:
javascript 复制代码
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();
  • 使用 root.render 方法将 React 组件渲染到根节点中。
  • <React.StrictMode> 是一个用于突出显示应用中潜在问题的工具。它不会渲染任何可见的 UI,只会激活额外的检查和警告。
  • <App /> 是应用的根组件,所有其他组件都将作为其子组件进行渲染。例如,之前我们文中提到的modal组件(模态组件)。

总结

  • 根节点:是 React 应用的起始点,也是 React 应用挂载到 DOM 的位置。通常是一个 HTML 元素,如 div,具有特定的 id。
  • 在 index.js 中创建根节点:使用 ReactDOM.createRoot 创建根节点,并将其与 HTML 文件中的 div 元素关联。
  • 渲染组件:使用 root.render 方法将 React 组件树渲染到根节点中,从而启动 React 应用。
相关推荐
黎宇幻生29 分钟前
Java全栈学习笔记33
java·笔记·学习
2501_926227941 小时前
.Net程序员就业现状以及学习路线图(五)
学习·.net
小周同学@2 小时前
谈谈对this的理解
开发语言·前端·javascript
Wiktok2 小时前
Pyside6加载本地html文件并实现与Javascript进行通信
前端·javascript·html·pyside6
一只小风华~2 小时前
Vue:条件渲染 (Conditional Rendering)
前端·javascript·vue.js·typescript·前端框架
柯南二号2 小时前
【大前端】前端生成二维码
前端·二维码
程序员码歌2 小时前
明年35岁了,如何破局?说说心里话
android·前端·后端
博客zhu虎康3 小时前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js
灰海4 小时前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs
王源骏4 小时前
LayaAir鼠标(手指)控制相机旋转,限制角度
前端