重慶自有網(wǎng)站推廣百度競價代運營公司
Web開發(fā)基礎(chǔ)學(xué)習(xí)系列文章目錄
第一章 基礎(chǔ)知識學(xué)習(xí)之理解React組件中的根節(jié)點
文章目錄
- Web開發(fā)基礎(chǔ)學(xué)習(xí)系列文章目錄
- 前言
- 一、根節(jié)點的概念
- 二、示例解釋
- 總結(jié)
前言
在 React 應(yīng)用中，根節(jié)點（Root Node）是指 React 組件樹的起始點，也是 React 應(yīng)用掛載到 DOM 的位置。根節(jié)點通常是一個 HTML 元素，React 應(yīng)用會將其組件樹渲染到這個元素中。
因為React應(yīng)用不能單獨存在，必須找到一個入口點，掛載上去，才能生長，渲染。所以有根節(jié)點的概念。
一、根節(jié)點的概念
根節(jié)點：是一個 HTML 元素，React 應(yīng)用會將其組件樹渲染到這個元素中。
掛載點：根節(jié)點也是 React 應(yīng)用的掛載點，表示 React 應(yīng)用在 DOM 中的起始位置。
二、示例解釋
在你的 index.html 文件中，有一個 div 元素，具有 id=“root”：
這個html就是 React 應(yīng)用運行時的基礎(chǔ) HTML 文件。React 應(yīng)用會將其組件樹渲染到這個 HTML 文件中的特定元素內(nèi)，通常是一個具有特定 id 的 div 元素。
在 React 應(yīng)用中，index.html 文件提供了一個基本的 HTML 結(jié)構(gòu)，React 應(yīng)用會將其組件樹掛載到這個文件中的一個特定元素內(nèi)。
- 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 應(yīng)用的根節(jié)點。React 會將組件樹渲染到這個 div 元素中。
- 在 index.js 中創(chuàng)建根節(jié)點并渲染組件
在 index.js 文件中，使用 ReactDOM.createRoot 創(chuàng)建根節(jié)點，并將根組件渲染到這個節(jié)點中：
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 組件渲染到根節(jié)點中。
- <React.StrictMode> 是一個用于突出顯示應(yīng)用中潛在問題的工具。它不會渲染任何可見的 UI，只會激活額外的檢查和警告。
- <App /> 是應(yīng)用的根組件，所有其他組件都將作為其子組件進(jìn)行渲染。例如，之前我們文中提到的modal組件（模態(tài)組件）。
總結(jié)
- 根節(jié)點：是 React 應(yīng)用的起始點，也是 React 應(yīng)用掛載到 DOM 的位置。通常是一個 HTML 元素，如 div，具有特定的 id。
- 在 index.js 中創(chuàng)建根節(jié)點：使用 ReactDOM.createRoot 創(chuàng)建根節(jié)點，并將其與 HTML 文件中的 div 元素關(guān)聯(lián)。
- 渲染組件：使用 root.render 方法將 React 組件樹渲染到根節(jié)點中，從而啟動 React 應(yīng)用。