ReactDOM:目标容器不是DOM元素

ReactDOM是React的一个核心库，用于将React组件渲染到目标容器中。它提供了一种简单而高效的方式来操作DOM元素。

概念： ReactDOM是React专门用于操作DOM的库。它负责将React组件渲染到目标容器中，并且在组件状态发生变化时，能够高效地更新DOM。

分类： ReactDOM属于前端开发领域，是React框架的一部分。

优势：

高效：ReactDOM使用虚拟DOM技术，通过比较虚拟DOM树的差异来最小化DOM操作，从而提高性能。
组件化：ReactDOM支持将应用程序拆分为多个可重用的组件，使代码更易于维护和扩展。
声明式：通过使用JSX语法，ReactDOM使得UI的描述更加直观和易于理解。

应用场景： ReactDOM适用于任何需要构建交互式用户界面的场景，包括Web应用程序、移动应用程序和桌面应用程序等。

推荐的腾讯云相关产品和产品介绍链接地址：腾讯云提供了一系列与前端开发和云计算相关的产品和服务，以下是一些推荐的产品和对应的介绍链接地址：

云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库MySQL版（CDB）：https://cloud.tencent.com/product/cdb_mysql
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能机器学习平台（AI Lab）：https://cloud.tencent.com/product/ailab
云函数（SCF）：https://cloud.tencent.com/product/scf

请注意，以上链接仅供参考，具体产品选择应根据实际需求进行评估和决策。

相关·内容

React中文官网已经搬迁了，原网址内容将不再更新

div class="my"> { // 将 id 为 root 的元素作为 React 容器 const...root = ReactDOM.createRoot(document.querySelector("#root")); // 将 class 为 my 的元素作为 React...// 再次将 id 为 root 的元素作为 React 容器，赋值给常量 root2 const root2 = ReactDOM.createRoot(document.querySelector...不要将 html 元素作为 React 容器 <!...不要将 body 元素作为 React 容器 <!

5881 0

react的jsx和React.createElement是什么关系？面试常问5

的描述，也就是虚拟 DOM3.3 扩展知识既然是虚拟 DOM，就意味着和渲染到页面上的真实 DOM 不是一个东西，那就需要用ReactDOM.render方法来渲染真实DOM。...ReactDOM.render( // 需要渲染的元素（ReactElement） element, // 元素挂载的目标容器（一个真实DOM） container, /.../ 回调函数，可选参数，可以用来处理渲染结束后的逻辑 [callback])ReactDOM.render 方法可以接收 3 个参数，其中第二个参数就是一个真实的 DOM 节点，这个真实的 DOM...节点充当“容器”的角色，React 元素最终会被渲染到这个“容器”里面去。...比如，示例中的 App 组件，它对应的 render 调用是这样的：const rootElement = document.getElementById("root");ReactDOM.render

4883 0

jsx和React.createElement是什么关系？面试常问

4352 0

react的jsx和React.createElement是什么关系？面试常问_2023-02-27

的描述，也就是虚拟 DOM 3.3 扩展知识既然是虚拟 DOM，就意味着和渲染到页面上的真实 DOM 不是一个东西，那就需要用ReactDOM.render方法来渲染真实DOM。...ReactDOM.render( // 需要渲染的元素（ReactElement） element, // 元素挂载的目标容器（一个真实DOM） container,...// 回调函数，可选参数，可以用来处理渲染结束后的逻辑 [callback] ) ReactDOM.render 方法可以接收 3 个参数，其中第二个参数就是一个真实的 DOM 节点，这个真实的...DOM 节点充当“容器”的角色，React 元素最终会被渲染到这个“容器”里面去。...比如，示例中的 App 组件，它对应的 render 调用是这样的： const rootElement = document.getElementById("root"); ReactDOM.render

3953 0

react的jsx和React.createElement是什么关系？面试常问

5353 0

简单实现虚拟 dom 和渲染

然后就需要对虚拟DOM转为真实DOM的处理转为真实DOM 思路把虚拟DOM变为真实DOM 把虚拟DOM上的属性更新/同步到DOM上把此虚拟DOM的儿子也都变成真实DOM并插入到这个容器中 dom.appendChild...把自己挂载到容器上 react-dom.js render方法接收虚拟DOM 和一个容器。...内部调用创建DOM方法：createDOM，然后将其添加到容器中 createDOM方法接收虚拟DOM，如果是文本元素(包括字符串和数值的)，就像我们上面的element1中的world没有标签包着的这种文本.../** * @param {*} vdom 要渲染的虚拟DOM * @param {*} container 要把虚拟DOM转换为真实DOM并插入到xx容器内 */ function render...// 创建一个真实DOM let dom = document.createElement(type) return dom } const ReactDOM = { render }

1.2K5 0

JSX

React元素也就是虚拟DOM React元素是构成React应用的最小单位。 React元素用来描述你在屏幕上看到的内容。...React元素实际上是普通的js对象，ReactDOM来确保浏览器中的DOM和React元素保持一致。...我们打包一下 npm run build 然后去build文件去找，可以看到将虚拟DOM，编译成了 createElement ReactDOM.render render方法负责把虚拟DOM转为真实...DOM注入容器。...有key值如果有key值得情况下,react就会通过key来发现tree2的第二个元素不是原先tree1的第二个元素，原先的第二个元素被挪到下面去了，因此在操作的时候就会直接指向insert操作，来减少

7595 0

ReactPortals传送门

ReactPortals传送门 React Portals提供了一种将子节点渲染到父组件以外的DOM节点的解决方案，即允许将JSX作为children渲染至DOM的不同部分，最常见用例是子组件需要从视觉上脱离父容器...，我们当然可以自行实现相关的能力，例如主动创建一个div结构挂载到目标DOM结构下例如document.body下，然后利用ReactDOM.render将组建渲染到相关结构中，在组件卸载时再将创建的div...其实我们再想一想，既然我们是要脱离父组件结构来实现这个能力，那么我们没有必要非得使用Portals，CSS的position定位不是也可以帮助我们将当前的DOM结构脱离文档流，也就是说我们没必要将目标组件的...，控制台打印a，符合预期，接下来鼠标移动到b元素上，控制台打印b，同样符合预期，那么接下来将鼠标移动到c，神奇的事情来了，我们会发现会先打印b再打印c，而不是仅仅打印了c，由此我们可以得到虽然看起来DOM...结构需要挂在最外层而不能直接嵌套地放在DOM结构中，当然如果能够保证不会出现相关问题，滚动容器不是body的情况且需要position absolute的情况下，可以通过getContainer传入DOM

2505 0

React前端学习

-- 操作的容器 --> Hello, world; 与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。...React DOM 会负责更新 DOM 来与 React 元素保持一致。...元素与另一个被熟知的概念——"组件"表达的并不是一个东西将一个元素渲染为 DOM 假设你的 HTML 文件某处有一个：其称为“根” DOM...想要将一个 React 元素渲染到根 DOM 节点中，只需把它们一起传入 ReactDOM.render()： const element = Hello, world; ReactDOM.render

8114 0

React两大组件，三大核心属性,事件处理和函数柯里化

h1>//此处一定不要写引号，因为不是字符串 //2.渲染虚拟dom到页面 ReactDOM.render(VDOM,document.getElementById("test")); //此处一定不要写引号，因为不是字符串 //2.渲染虚拟dom到页面 ReactDOM.render(VDOM,document.getElementById("test")); </...dom元素，后放进去的dom元素会覆盖之前放入的dom元素 //创建组件 class Demo extends React.Component { //React.createRef...调用后返回一个容器 //该容器可以存储ref所标识的节点，该容器是专人专用 //后来的覆盖之前的 myref=React.createRef() showData=()=...DOM事件----为了更好的兼容性 2)React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)---为了高效 2.通过event.target得到发生事件的DOM元素对象当发生事件的元素正好是我们需要操作的元素时

3.1K1 0

React前段学习（一）

-- 操作的容器 --> Hello, world; 与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。...React DOM 会负责更新 DOM 来与 React 元素保持一致。...元素与另一个被熟知的概念——"组件"表达的并不是一个东西将一个元素渲染为 DOM 假设你的 HTML 文件某处有一个：其称为“根” DOM 节点...想要将一个 React 元素渲染到根 DOM 节点中，只需把它们一起传入 ReactDOM.render()： const element = Hello, world; ReactDOM.render

6271 0

React教程

; 与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保浏览器 DOM 的数据内容与 React 元素保持一致。...要将React元素渲染到根DOM节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上：实例 const element = Hello, world!...; 这种看起来可能有些奇怪的标签语法既不是字符串也不是 HTML。它被称为 JSX，一种 JavaScript 的语法扩展。我们推荐在 React 中使用 JSX 来描述用户界面。...与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保浏览器 DOM 的数据内容与 React 元素保持一致。...要将 React 元素渲染到根 DOM 节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上： React 实例 var myDivElement = <div

6852 0

React——组件的三大核心属性【七】

元素。...使用的是自定义(合成)事件, 而不是使用的原生DOM事件___兼容性 2) React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)___高效性 2.通过event.target得到发生事件的...DOM元素对象___不要过度使用ref <!...通过onXxx属性指定事件处理函数(注意大小写) 1) React使用的是自定义(合成)事件, 而不是使用的原生DOM事件___兼容性 2) React中的事件是通过事件委托方式处理的...通过event.target得到发生事件的DOM元素对象___不要过度使用ref * */ // 创建ref容器 myRef = React.createRef()

1251 0

跟着写一遍就会了，手写一个mini版本的React（1.createElement）

、前言: 本文通过手写一个简易版 React，对 React 基本原理有一个直观的认识；实现的版本为16.8，基于pomb.us/build-your-…；学习前提需要有React基础； 2、实现目标...元素属性 children子元素解答一下开篇提出的问题：引入React的作用，使用React进行解析JSX，如果不引入React，上面代码就会报错。...打印一下element： import React from 'react'; import ReactDOM from 'react-dom'; const element = <h1 title=...() 将 element 添加到 id 为 root 的 DOM 节点中，我们接下来实现这个方法来代替React源码中的 ReactDOM.render()方法；示例代码： const element...child : createTextElement(child) //不是对象说明是文本节点 ), }, } } /** * 当children为非对象时

1K0 0

详解「react-dom」 API

如果容器中没有安装任何组件，则调用此函数什么也不做。返回true是否已卸载组件以及false是否没有要卸载的组件。...React希望子组件的卸载/渲染是通过父组件的状态来控制，而不是直接通过操纵子组件。你可以查看这个回答来理解它。...ReactDOM.findDOMNode(component) 如果组件已经被挂载到 DOM 上，此方法会返回浏览器中相应的原生 DOM 元素。...我们可以通过createPortal(vNode,dom)在React中跳过层级关系将我们的vNode任何React元素渲染到指定的真实Dom元素上去。...这里其实我想给大家重点讲述的是 ReactDOM.createPortal(child, container)作用简单来说就一句话:createPortal提供一种将React元素子节点渲染到真实DOM

8752 0

React基础教程

react是前端三大开发框架之一，是一套UI引擎，是DOM的抽象层，并不是web应用的完整解决方案。...= Hello React // 千万不要加引号 // 渲染虚拟 DOM // 到页面真实 DOM 容器中 ReactDOM.render(vDom, document.getElementById...注意 1: 它不是字符串, 也不是 HTML/XML 标签 c....只要用了 JSX，都要加上 type="text/babel", 声明需要 babel 来处理渲染虚拟 DOM(元素) 语法: ReactDOM.render(virtualDOM, containerDOM...) 作用: 将虚拟 DOM 元素渲染到页面中的真实容器 DOM 中显示参数说明 a.

1831 0

React框架的介绍

// 2.渲染虚拟dom到页面 ReactDOM.render(VDOM,document.getElementById('test')) 2.2...元素是构成React应用的最小单位，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面。 // 2.渲染虚拟dom到页面 ReactDOM.render(VDOM,document.getElementById('test')) ...babel.min.js"> /* 此处一定要写babel *///1.创建虚拟DOMconst VDOM = ( /* 此处一定不要写引号，因为不是字符串...标签必须闭合3.1.7.标签首字母(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。

4012 0

React---JSX使用

2) 注意1：它不是字符串, 也不是HTML/XML标签　　　　3) 注意2：它最终产生的就是一个JS对象　　4. 标签名任意: HTML标签或其它标签　　5....基本语法规则　　　　1) 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析　　　　2) 遇到以 { 开头的代码，以JS语法解析: 标签中的js...(元素) 语法: ReactDOM.render(virtualDOM, containerDOM) 作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示参数说明　　　　1) 参数一: 纯js...或jsx创建的虚拟dom对象　　　　2) 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div) 三、JSX练习代码（本例子是直接引入react文件实现的）： 1 <script...到页面 33 ReactDOM.render(VDOM,document.getElementById('test')) 34 效果： image.png

5715 0

第一篇：JSX 代码是如何“摇身一变”成为 DOM 的？

下面这个组件中的 render 方法返回值，就是用 JSX 代码来填充的： import React from "react"; import ReactDOM from "react-dom"; class...既然是“虚拟 DOM”，那就意味着和渲染到页面上的真实 DOM 之间还有一些距离，这个“距离”，就是由大家喜闻乐见的ReactDOM.render方法来填补的。...下面我简单介绍下 ReactDOM.render 方法的入参规则： ReactDOM.render( // 需要渲染的元素（ReactElement） element, //...元素挂载的目标容器（一个真实DOM） container, // 回调函数，可选参数，可以用来处理渲染结束后的逻辑 [callback] ) ReactDOM.render 方法可以接收...3 个参数，其中第二个参数就是一个真实的 DOM 节点，这个真实的 DOM 节点充当“容器”的角色，React 元素最终会被渲染到这个“容器”里面去。

1.5K1 1

在 React 中实现 keep alive（可参与文末讨论哦）

{display: 'none'} : {}}> 但这种方案其实只是在“「视觉上」”将元素隐藏起来了，并没有真正的移除，那有没有可能把 DOM 树真的移除掉，同时又让组件不被销毁呢...Portals ❝Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。...❞ 这是 React 官方文档[1]上对 Portal 特性的介绍，值得注意的是，这里只是说“父组件以外的 DOM 节点”，但没有要求这个 DOM 节点是真的在页面上，还是「只是存在于内存中」。...因此，我们可以先通过 document.createElement 在内存中创建一个元素，然后再通过 React.createPoral 把 React 子节点渲染到这个元素上，这样就实现了“空渲染”。...然后，我们会创建一个容器 div 元素，并且通过 containerRef 拿到它的引用。

1.8K3 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云