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 应用。