`

React 获取虚拟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);

 

分享到:
评论

相关推荐

    虚拟DOM的实现

    - 创建虚拟DOM节点:首先,我们需要定义一个函数或者类来表示虚拟DOM节点,它包含元素类型(如div、span等)、属性、文本内容等信息。 - Diff算法:当新旧两个虚拟DOM树发生变化时,我们需要找到最小的修改路径。...

    虚拟DOM与diff算法.doc

    在现代Web开发中,虚拟DOM(Virtual DOM)与diff算法是提高应用性能的关键技术,特别是在Vue和React等框架中。它们解决了直接操作DOM导致的性能问题,使得开发者可以更高效地处理用户界面的更新。 虚拟DOM是一种...

    26-虚拟DOM:虚拟DOM和实际的DOM有何不同?_For_vip_user_0011

    在虚拟DOM 更新流程中,我们可以看到,React 会生成一个新的虚拟DOM,然后拿新的虚拟DOM 和之前的虚拟DOM 进行比较,这个过程会找出变化的节点,然后再将变化的节点应用到 DOM 上。在这个过程中,我们可以看到,虚拟...

    虚拟dom1

    - 创建虚拟DOM节点,包括属性和子节点。 - 使用diff算法比较新旧虚拟DOM树,找出差异。 - 应用diff结果到实际DOM,更新界面。 **7. 小结** 虚拟DOM通过抽象和优化DOM操作,提高了前端应用的性能和开发效率。Vue.js...

    react相关.zip

    - **虚拟DOM**: React通过虚拟DOM提高性能,比较前后两版虚拟DOM并计算最小变更,然后应用到实际DOM上,避免了频繁操作DOM导致的性能损失。 - **JSX**: React推荐使用JSX语法,它允许在JavaScript中书写类似HTML的...

    react-用于判断组件大小的React钩子

    在React开发过程中,有时我们需要了解组件的大小,例如DOM元素的尺寸、虚拟DOM节点的数量或者组件的渲染性能。为了满足这种需求,React提供了一些内置机制和社区开发的钩子(hooks),帮助开发者实现对组件大小的...

    简单的VirtualDom算法500行代码实现

    虚拟DOM节点通常由以下属性组成:`type`(元素类型,如`div`、`span`等)、`props`(属性对象,包含子节点、事件处理函数等)和`children`(子节点数组)。首先,我们需要定义一个表示虚拟DOM节点的数据结构,例如...

    virtualDomDemo:React虚拟Dom测试演示

    在“virtualDomDemo:React虚拟DOM测试演示”项目中,我们可以预期看到如何在实践中运用这些概念。可能包含以下几个部分: 1. **基本React组件**:项目中可能包含了几个简单的React组件,展示如何使用JSX定义组件的...

    vue 虚拟DOM的原理

    虚拟DOM是一种编程概念,最初是在前端框架React中提出,而后在Vue等其他现代前端框架中得到广泛的应用。虚拟DOM的出现主要是为了解决直接操作真实DOM带来的性能问题和简化开发者对DOM操作的复杂度。 在前端开发中,...

    js代码-手写虚拟dom

    2. **创建虚拟DOM节点**:在JavaScript中,这通常涉及构造函数,如`React.createElement`的模拟,用于生成具有指定类型的虚拟DOM节点。 3. **属性和子节点**:虚拟DOM节点会存储元素的属性值和子节点,这些在更新时...

    react组件开发流程(一个新手的入门开发整理)

    当组件状态发生变化时,React首先在内存中构建一个新的虚拟DOM树,并与之前的虚拟DOM树进行比较,计算出最小的差异,然后仅更新这些差异对应的DOM节点。 - `Diff算法`:为了高效地识别哪些DOM节点需要更新,React...

    局部刷新的两种实现方式大家看看啊

    这两种方法各有优缺点。基于DOM操作的方式简单直观,但频繁的DOM操作可能导致性能下降。虚拟DOM虽然增加了额外的计算开销,但它通过智能地计算和应用差异,可以有效减少DOM操作,提高性能。 在实际项目中,开发者...

    React基础 pdf version2

    创建虚拟DOM有两种方式: - 使用JSX(JavaScript XML)语法,如 `&lt;h1 id="atguigu"&gt;&lt;span&gt;Hello, React!&lt;/span&gt;&lt;/h1&gt;`。 - 使用`React.createElement()`函数,如 `React.createElement('h1', {id: 'atguigu'}, '...

    前端项目-incremental-dom.zip

    - **增量DOM**:与虚拟DOM类似,但它不是一次性重绘整个组件树,而是通过比较新旧虚拟DOM节点的差异,逐个更新真实DOM节点,这样可以减少DOM操作次数,提高性能。 2. **工作原理**: - **diff算法**:增量DOM的...

    hyperHTML一个快速和轻量级的虚拟DOM替代

    虚拟DOM首先将JavaScript对象与实际的DOM节点对应起来,当数据发生变化时,它不会立即更新DOM,而是创建一个新的虚拟DOM树。接着,通过高效的算法(如Diff算法)来找出两棵树之间的最小差异,然后只对实际DOM进行...

    React 17 道面试题及答案.docx

    4. componentDidMount:组件装载之后调用,此时我们可以获取到 DOM 节点并操作。 更新阶段: 1. getDerivedStateFromProps:此方法在更新个挂载阶段都可能会调用。 2. shouldComponentUpdate:...

    七.React原理剖析 React核心api

    它接收两个参数,一个是React组件或元素,另一个是希望挂载此组件的目标DOM节点。`ReactDOM.render(, document.getElementById('root'))`将把组件渲染到页面ID为'root'的元素内。 4. **虚拟DOM diff算法**:React...

    react-ReactcreateElement和JSX替代语法糖

    在React开发中,`React.createElement`函数和JSX(JavaScript XML)是两种常见的用于创建React组件树的方法。本文将深入探讨这两种技术,并分析它们的差异和应用场景。 React.createElement是React库提供的一种创建...

    vdom:虚拟dom实现

    它的JSX语法允许开发者像编写HTML一样编写组件,实际上这些 JSX 代码会被编译成虚拟DOM节点。React的`useState`和`useEffect`等 hooks 也与虚拟DOM紧密相关,用于管理组件状态和副作用。 6. **其他框架的虚拟DOM** ...

Global site tag (gtag.js) - Google Analytics