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