文章/答案/技术大牛

发布

社区首页 >问答首页 >在react中卸载组件时，我是否应该删除对DOM元素的引用？

问在react中卸载组件时，我是否应该删除对DOM元素的引用？
EN

Stack Overflow用户

提问于 2017-12-19 09:45:05

回答 1查看 12K关注 0票数 5

我有一个react组件，它在挂载时接受dom引用(我知道这是一个边缘情况)。我想知道是否有必要将托管dom的属性设置为null。或者react会处理它吗？

componentDidMount() {
   this.elm = document.getElementById('foo')
}

componentWillUnmount(){
   this.elm = null
}

javascript

reactjs

dom

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-12-19 10:11:57

通过react文档，您只需清除全局元素，如使计时器无效、取消网络请求或清除在componentDidMount()中创建的任何订阅。

在卸载周期中，引用将随组件一起销毁。

https://reactjs.org/docs/react-component.html#componentwillunmount

票数 9

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47884059

复制

42. Vue使用ref获取dom元素以及组件引用

javascript vue.js

在普通的js操作中，一般都是直接操作dom元素，但是对于Vue.js框架来说，一般是不允许直接操作dom元素的。

Devops海洋的渔夫

2022/01/17

1.6K0

44. Vue使用ref获取dom元素以及组件引用

javascript vue.js

在普通的js操作中，一般都是直接操作dom元素，但是对于Vue.js框架来说，一般是不允许直接操作dom元素的。

Devops海洋的渔夫

2020/07/20

11.9K0

React性能优化

react

React性能优化单个React组件的性能优化 shouldComponentUpdate React利用Virtual DOM来提高渲染性能，但是Virtual DOM计算前后的区别仍然需要消耗时

IMWeb前端团队

2017/12/29

1.1K0

React性能优化

react 渲染

React利用Virtual DOM来提高渲染性能，但是Virtual DOM计算前后的区别仍然需要消耗时间。如果我们已经提前知道一个组件不应该更新，那么直接通过shouldComponentUpdate函数返回false，组件则不会进行接下来的update操作，也就不需要进行Virtual DOM的计算，可以节省很长的时间。

IMWeb前端团队

2019/12/03

5930

说说 React 中 fiber、DOM、ReactElement、实例对象之间的引用关系

react 网站 node.js 面向对象编程

本文探究 fiber、DOM、ReactElement、类组件实例对象之间的引用关系。

前端西瓜哥

2022/12/21

1.4K0

说说 React 中 fiber、DOM、ReactElement、实例对象之间的引用关系

React 元素 VS 组件

react html

在前面的「前端框架」中，我们从Fiber的实现机制描绘了React在页面渲染和数据处理方面做了的努力。其中有很多源码级别的概念。例如，React-Element/React-Fiber/Current Tree 和 workInProgress Tree等。

前端柒八九

2022/08/25

7540

React性能优化的8种方式了解一下

react

react凭借virtual DOM和diff算法拥有高效的性能，除此之外也有很多其他的方法和技巧可以进一步提升react性能，在本文中我将列举出可有效提升react性能的几种方法，帮助我们改进react代码，提升性能。但是我们不必一定要在项目中使用这些方法，但是我们有必要知道如何使用这些方法。

程序狗

2021/12/20

1.5K0

React.js 实战之元素渲染将元素渲染到 DOM 中

ddos

与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象 React DOM 可以确保浏览器 DOM 的数据内容与 React 元素保持一致

JavaEdge

2018/12/21

2.6K0

详解「react-dom」 API

react jquery ui 网站渲染 api

从Vue转到React差不多快三个月，这两种框架其实在设计哲学上完全是不一样的道路但是同时又那么相似。

19组清风

2021/11/15

8840

React 深入系列１：React 中的元素、组件、实例和节点

react java

文：徐超，《React进阶之路》作者授权发布，转载请注明作者及出处 ---- React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使用React。 React 中的元素、组件、实例和节点，是React中关系密切的4个概念，也是很容易让React 初学者迷惑的4个概念。现在，老干部就来详细地介绍这4个概念，以及它们之间的联系和区别，满足喜欢咬文嚼字、刨根问底的同学（老干部就是其中一员）的好奇心。元素 (Element) Re

iKcamp

2018/04/17

2.3K0

React技巧之组件中返回多个元素

android https 网络安全 react

原文链接：https://bobbyhadz.com/blog/react-return-multiple-elements[1]

chuckQu

2022/08/19

1K0

react中的虚拟DOM

react

6. 新的DOM（实际上就是DocumentFragment），和原始的DOM做比对，找差异

EchoROne

2022/08/15

7880

React组件应该如何封装？

腾讯云测试服务

相反，紧耦合的系统会失去上面描述的好处。主要缺点是很难修改高度依赖于其他组件的组件。即使是一处修改，也可能导致一系列的依赖组件需要修改。

胡哥有话说

2019/08/30

2.1K0

京东前端经典react面试题合集

react dom render setstate state

如果您尝试直接改变组件的状态，React 将无法得知它需要重新渲染组件。通过使用setState()方法，React 可以更新组件的UI。

beifeng1996

2022/11/09

1.3K0

React高频面试题（附答案）

react 渲染

在开发过程中，我们需要保证某个元素的 key 在其同级元素中具有唯一性。在 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染。此外，React 还需要借助 Key 值来判断元素与本地状态的关联关系，因此我们绝不可忽视转换函数中 Key 的重要性。

flyzz177

2022/07/27

1.5K0

美团前端二面常考react面试题及答案_2023-03-01

react 渲染

关于 React16 开始应用的新生命周期：可以看出，React16 自上而下地对生命周期做了另一种维度的解读：

xiaofeng123aa

2023/03/01

2.9K0

前端一面react面试题指南_2023-03-01

渲染编程算法 react

React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。

xiaofeng123aa

2023/03/01

1.3K0

关于React的Key导致的bug总结

react 编程算法

因为本身数据没有类似id的唯一值，这里便不假思索的启用了索性作为key，渲染也就完成了，顺便也加上了添加和删除功能，一切都是那么顺利。因为需要编辑，这里及把最初的展示组件替换成了input组件，这里并没有使用受控组件，而使用非受控组件，监听blur后再进行数据更新上传至服务器，所以input只设置了defaultvalue值，然后测试，发现删除怎么也删不了第一行。如图所示：

gary12138

2022/10/05

6840

推荐一个检测 JS 内存泄漏的神器

react javascript html 网站 api

大家好，我是 ConardLi。作为一名 Web 应用程序开发者，排查和修复 JavaScript 代码的内存泄漏一直是最困扰我的问题之一。

ConardLi

2023/01/09

3.8K0

一定要熟记这些常被问到的React面试题

react ecmascript jquery

要了解 JSX，首先先了解什么三个主要问题，什么事 VDOM，差异更新和 JSX 建模：

wscats

2020/06/06

1.3K0

相似问题

React组件在typescript中引用自己的DOM元素

218

对react组件外部元素的DOM操作

根据对DOM的变量引用从DOM中删除元素？

在React组件中操作DOM元素

在React组件中插入DOM元素

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

问在react中卸载组件时，我是否应该删除对DOM元素的引用？
EN