React 获取虚拟dom节点的两种方法

最新推荐文章于 2025-09-13 16:41:50 发布
原创 最新推荐文章于 2025-09-13 16:41:50 发布 · 2.6k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#乔乐共享 #众观千象 #每天进步一点点 #学习永无止境 #React

本文介绍了在React中获取DOM节点值的两种不同方法。一种是通过使用`ref`属性的传统方式，并结合`findDOMNode`来获取；另一种则是采用更现代的方法，即直接在`ref`回调函数中保存对DOM节点的引用。这两种方法各有特点，在实际应用中可以根据项目需求和个人偏好选择合适的方式。

第一种常规做法：

<div className="confirm-money" ref="totalNeedPayRef">
  { totalNeedPay }
</div>

import React from 'react';
import { findDOMNode } from 'react-dom';

const { totalNeedPayRef } = this.refs;
const totalNeedPay = findDOMNode(totalNeedPayRef).innerText.replace(/,/g, '') * 1;

 

 

第二种超前做法：

<span className="price-num" ref={(ref) => this.payMoneyRef = ref}>investMoney</span>

console.log(this.payMoneyRef.innerText);

 

react.js 获取真实的DOM节点实例(必看)
11-26
为了获取真实的dom节点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。 var MyComponent = React.createClass({ handleClick: function() { this.refs.myTextInput.focus(); }, render: function() { return ( <input type="text" ref="myTextInput" /> <input type="button" value="Focus t
dom-find:用于查找 DOM 元素的实用程序。 由 react-stickydiv 使用
06-01
查找 DOM 实用程序 用于查找 DOM 元素的实用程序。 由 var util = require ( 'dom-find' ) ; // util.findPos(document.getElementById("element")); // [0,100] // util.findPosRelativeToViewport(document.getElementById("element")); // [50,-200] 你也可以在 React 中使用它 var util = require ( 'dom-find' ) ; // util.findPos(React.findDOMNode()); // [0,100] // util.findPosRelativeToViewport(React.findDOMNode()); // [50,-200]
React获取DOM方法2018
cloveryuan的博客
07-09 9975
以下提供三种方法：1. js 常规dom操作方式，通过id获取dom2.react原生函数findDOMNode获取dom3.通过ref来定位一个组件，切记ref要全局唯一（类似id）import React, { Component } from 'react';import ReactDOM from 'react-dom'; class Index extends Component { ...
第四阶段笔记 React
weixin_44777648的博客
09-28 761
一些学习笔记
react 获取dom节点
olderandyanger的博客
10-29 890
在 React 中，通常是通过数据驱动的方式来更新 UI，而不是直接操作 DOM 节点。然而，在某些情况下，我们仍然需要直接操作 DOM 节点，例如处理表单验证、动画等。接下来，我们将介绍 React 中几种常用的获取 DOM 节点的方法。在 React 中，虽然通常是通过数据驱动来更新 UI，但是有些场景我们仍然需要直接操作 DOM 节点。本篇博客介绍了 React 中获取 DOM 节点的几种方法，包括 ref、callback ref 和 findDOMNode。
react中findDOMNode
weixin_30307921的博客
02-21 643
在使用react过程中，大家有时会那么这里的findDomNode是做什么的呢？ import{ findDomNode } from'react-dom'; 　　简单来说是用来得到实际Dom的，因为react组件有个特点，它有自定义组件，比如<NavBox/>这种，用ref来获取这种组件获取到的这是组件定义的对象的实例，见下面代码 getNodeInstance() { ...
使用React获取真实DOM节点
MggnHaskell的博客
10-06 357
本文将介绍如何在React中获取真实的DOM节点，并提供相应的源代码示例。需要注意的是，获取真实的DOM节点可能会绕过React的虚拟DOM机制，潜在地破坏了React的组件化和状态管理的优势。只有在必要的情况下，才应该使用ref来获取和操作真实的DOM节点。通过使用ref对象，我们可以轻松地获取和操作真实的DOM节点。但需要谨慎使用，尽量避免直接操作DOM节点，以充分利用React的虚拟DOM机制和组件化开发的优势。在React中，可以使用ref来获取真实的DOM节点。在上面的示例中，我们使用了。
【React中虚拟DOM与Diff算法详解】
Emnational的博客
05-17 1356
React中的虚拟DOM（Virtual DOM）是一种轻量级的JavaScript对象树，用于描述真实DOM结构，其主要目标是优化性能和实现跨平台支持。虚拟DOM通过构建、对比和更新三个阶段工作，其中Diff算法用于高效比较新旧虚拟DOM树的差异，并仅更新真实DOM中变化的部分。Diff算法的核心策略包括树对比（Tree Diff）、组件对比（Component Diff）和元素对比（Element Diff），并通过key标识优化列表更新。尽管虚拟DOM在多数场景下提升了性能，但仍存在内存消耗和首次渲染
深入了解 React 中的虚拟 DOM
p1967914901的博客
10-23 952
虚拟DOM是React的一个基本概念。你可能听说过它，然而你可能不理解它是如何工作的以及React为什么使用它。本文将介绍什么是虚拟DOM，它在React中的好处，以及帮助解释这个概念的实际示例代码。
React 原理篇 - 深入理解虚拟 DOM
最新发布
ik_makabaka的博客
09-13 892
本文围绕 React 虚拟 DOM 展开，介绍其是对真实 DOM 的描述性编程概念，以 JS 对象实现。阐述其能减少 DOM 操作成本、支持跨平台渲染的优势，解析 React 中虚拟 DOM 的实现、工作流程及 Diff 算法，也提及初始渲染开销等局限性，助读者理解其核心与应用。
React 中的虚拟 DOM 是什么？
分享身边生活经验blog
10-14 1057
虚拟 DOM 是一个基本的 React 概念。如果您在过去几年编写过 React 代码，您可能听说过它。但是，你可能不明白它是如何工作的以及 React 为何使用它。本文将介绍什么是虚拟 DOM，它在 React 中的好处，以及帮助解释这个概念的实用示例代码。在本文中：概念回顾：DOM 是什么？重新渲染如何影响性能React 中的重新渲染：为什么要使用虚拟 DOMReact 中的虚拟 DOMReact 如何实现虚拟 DOM回顾虚拟 DOM 以及为什么在 React 中使用它。
React如何将组件渲染到指定DOM节点详解
12-12
前言 众所周知React优点之一就是他的API特别简单。通过render 方法返回一个组件的基本结构，如同一个简单的函数，就可以得到一个可以复用的react组件。但是有时候还是会有些限制的，尤其是他的API中，不能控制组件所应该渲染到的DOM节点，这就让一些弹层组件很难控制。当父元素设置为overflow：hidden 的时候，问题就会出现了。 例如就像下面的这样： 我们实际期待的效果是这样的： 幸运的是，虽然不是很明显，但有一个相当优雅的方式来绕过这个问题。我们学到的第一个react函数是render 方法，他的函数签名是这样的: ReactComponent render(
react中findDomNode
weixin_30396699的博客
10-14 283
在使用react过程中，大家有时会 import { findDomNode } from 'react-dom'; 　　那么这里的findDomNode是做什么的呢？ 　　简单来说是用来得到实际Dom的，因为react组件有个特点，它有自定义组件，比如<NavBox/>这种，用ref来获取这种组件获取到的这是组件定义的对象的实例，见下面代码 getNodeIn...
react 获取实际的dom元素 findDomNode
weixin_30767835的博客
05-25 447
首先引入findDomNodeimport {findDomNode} from 'react-dom'然后获取绑定的实例 getNodeInstance() { const nodeInstance =this.refs.navBox; } functionWapShop() { return( <div> ...
React this.refs.dom与ReactDOM.findDOMNode使用与区别
weixin_33736832的博客
07-19 1277
一、选取 DOM 元素 1.this.refs.name获取dom节点的DOMNode handleSubmit = () => { let name = this.refs.name.value, // 获取DOMnode content = this.refs.content.value, ...
ReactDom（render、findDOMNode、unmountComponentAtNode）
AIWWY的博客
12-06 743
目录ReactDomrenderfindDOMNodeunmountComponentAtNodereact-dom是React剥离出的涉及DOM操作的部分。render用于将React渲染的虚拟DOM渲染到浏览器DOM。注意有可选参数callback函数，当组件装载完毕时，callback 就会被调用。 findDOMNode 用于获取真正的DOM元素，以便对DOM节点进行操作。可以传入组件或ref来获取原生dom（ref加在原生dom上，获取到的就是原生dom；ref加在组件上，获取到的是组件实例
React中使用 ref 和 findDomNode
徐同保的专栏
10-12 5959
对于 React 组件来说，refs 会指向一个组件类的实例，所以可以调用该类定义的任何方法。 如果需要访问该组件的真实 DOM，可以用 ReactDOM.findDOMNode 来找到 DOM 节点，但我们并 不推荐这样做。因为这在大部分情况下都打破了封装性，而且通常都能用更清晰的办法在 React 中构建代码。 import React, { Component } from 'rea...
react学习笔记13：获取DOM节点Refs和findDOMNode
weixin_34290352的博客
10-13 603
为什么80%的码农都做不了架构师？>>> ...
react中findDomNode的作用
热门推荐
潜行IT的博客
08-01 2万+
在使用react过程中，大家有时会 那么这里的findDomNode是做什么的呢？ import { findDomNode } from 'react-dom'; 　　简单来说是用来得到实际Dom的，因为react组件有个特点，它有自定义组件，比如&lt;NavBox/&gt;这种，用ref来获取这种组件获取到的这是组件定义的对象的实例，见下面代码 getNodeInstance(...
React的虚拟dom
03-21
### React 虚拟 DOM 的工作原理及实现方式 #### 1. 虚拟 DOM 的基本概念 虚拟 DOM 是一种轻量级的 JavaScript 对象，它是真实 DOM 的副本。在 React 中，所有的 DOM 更新操作首先会在虚拟 DOM 上完成，随后通过高效的 Diff 算法计算出需要更新的真实 DOM 部分并进行同步[^2]。 #### 2. 虚拟 DOM 的创建与 JSX 编译 当开发者使用 JSX 编写组件时，这些 JSX 代码会被 Babel 自动编译为 `React.createElement` 方法调用的形式。例如： ```javascript let element = ( <h1 id="test" className="testClass"> test </h1> ); ``` 上述 JSX 代码会被编译为如下形式： ```javascript let element = React.createElement( "h1", { id: "test", className: "testClass" }, "test" ); ``` 这表明，在底层实现中，JSX 只是一个语法糖，而真正的核心逻辑是由 `React.createElement` 构建虚拟 DOM 节点[^3]。 #### 3. 虚拟 DOM 的更新流程 React 使用双缓冲策略管理界面状态的变化。每当组件的状态或属性发生变化时，React 会重新构建整个组件树对应的虚拟 DOM，并将其与之前的虚拟 DOM 进行对比（即 Diff 算法）。Diff 算法的主要目标是以最有效的方式找到两棵虚拟 DOM 树之间的差异[^1]。 以下是虚拟 DOM 更新的核心步骤： - **重建虚拟 DOM**：基于最新的数据结构生成新的虚拟 DOM。 - **执行 Diff 算法**：比较新旧两个虚拟 DOM 树，找出它们之间存在的差异。 - **更新真实 DOM**：仅针对有变化的部分对真实 DOM 进行最小化的修改，从而减少不必要的重绘和回流操作[^5]。 #### 4. 性能优化的关键点 尽管虚拟 DOM 提供了显著的性能优势，但在某些情况下仍需注意潜在的性能瓶颈。为了进一步提升应用效率，可以采取以下措施： - 减少无意义的重新渲染次数，合理使用 `shouldComponentUpdate` 或函数式组件中的 `React.memo` 来控制子组件的更新行为。 - 利用 Immutable 数据结构避免深层对象比较带来的额外开销。 - 合理拆分子组件，使每次更新影响范围尽可能缩小。 --- ### 示例代码展示虚拟 DOM 创建过程 下面展示了如何手动模拟简单的虚拟 DOM 和其更新机制： ```javascript // 手动定义一个简易版的虚拟 DOM 结构 function createVNode(type, props, children) { return { type, props, children }; } // 初始化虚拟 DOM const vdomOld = createVNode("div", {}, [ createVNode("span", {}, ["Hello"]), ]); // 新的虚拟 DOM const vdomNew = createVNode("div", {}, [ createVNode("span", {}, ["World"]), ]); // 模拟 Diff 算法 function simpleDiff(vdomOld, vdomNew) { if (vdomOld.type !== vdomNew.type || vdomOld.props !== vdomNew.props) { console.log("Detected changes in node structure or attributes."); } if (JSON.stringify(vdomOld.children) !== JSON.stringify(vdomNew.children)) { console.log("Children have changed."); } } simpleDiff(vdomOld, vdomNew); // 输出检测到的内容变更信息 ``` 此示例简化了真实的虚拟 DOM 差异检测逻辑，但足以说明其实现思路。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值