网站建设基本教程,采集评论发布到wordpress,wordpress质感主题,无极电影网叛逆者Web开发基础学习系列文章目录
第一章 基础知识学习之理解React组件中的根节点 文章目录 Web开发基础学习系列文章目录前言一、根节点的概念二、示例解释总结 前言
在 React 应用中#xff0c;根节点#xff08;Root Node#xff09;是指 React 组件树的起始点#xff0c;…Web开发基础学习系列文章目录
第一章 基础知识学习之理解React组件中的根节点 文章目录 Web开发基础学习系列文章目录前言一、根节点的概念二、示例解释总结 前言
在 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文件
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleReact App/title
/head
bodynoscriptYou need to enable JavaScript to run this app./noscriptdiv idroot/div
/body
/html这个 div 元素就是 React 应用的根节点。React 会将组件树渲染到这个 div 元素中。
在 index.js 中创建根节点并渲染组件 在 index.js 文件中使用 ReactDOM.createRoot 创建根节点并将根组件渲染到这个节点中
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.StrictModeApp //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 应用。
