说说对React refs 的理解？应用场景？

先了解，是什么？

React 中的 Refs提供了一种方式，允许我们访问 DOM节点或在 render方法中创建的 React元素。
本质为ReactDOM.render()返回的组件实例，如果是渲染组件则返回的是组件实例，如果渲染dom则返回的是具体的dom节点。

如何去使用？

传入字符串，使用时通过 this.refs.传入的字符串的格式获取对应的元素
传入对象，对象是通过 React.createRef() 方式创建出来，使用时获取到创建的对象中存在 current 属性就是对应的元素
传入函数，该函数会在 DOM 被挂载时进行回调，这个函数会传入一个元素对象，可以自己保存，使用时，直接拿到之前保存的元素对象即可
传入hook，hook是通过 useRef() 方式创建，使用时通过生成hook对象的 current 属性就是对应的元素

使用场景

在某些情况下，我们会通过使用refs来更新组件，但这种方式并不推荐，过多使用refs，会使组件的实例或者是DOM结构暴露，违反组件封装的原则；

但下面的场景使用refs非常有用：

对Dom元素的焦点控制、内容选择、控制
对Dom元素的内容设置及媒体播放
对Dom元素的操作和对组件实例的操作
集成第三方 DOM 库

说说对React refs 的理解？应用场景？相关推荐

React中refs的理解
React中refs的理解 Refs提供了一种方式,允许我们访问DOM节点或在render方法中创建的React元素. 描述在典型的React数据流中,props是父组件与子组件交互的唯一方式,要修 ...
React.js 的 Web 应用场景有哪些
React.js 的 Web 应用场景有哪些博客(Gatsby) 商业网站作品集论坛评级网站会员网站电子学习模块图片展示自我推广的个人主页职位介绍业务目录 Quora 这样的问答网 ...
Vue中$refs的理解
Vue中$refs的理解 $refs是一个对象,持有注册过ref attribute的所有DOM元素和组件实例. 描述 ref被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的$refs对象 ...
React基础之Refs的理解与使用
目录为什么会用到Refs 何时使用Refs Refs有哪些使用方式字符串形式的refs 回调形式的refs createRef的使用为什么会用到Refs 我们在使用React写代码的时候对Ref ...
理解react生命周期，以及react生命周期的使用场景
前言: 在最初学习react的过程中,我对react的生命周期没有足够的重视,使得我在开发过程中遇到了很多问题.弄懂react的声明周期,可以让你的代码更加高效,更加优美. 什么是生命周期函数? ...
React：真正理解虚拟DOM
在mvvm这个框架领域,到现在仍然存在一个及其热门的面试问题:为什么要使用虚拟DOM? 一般的回答如下: 本文将通过另一个视角,给出不同的答案,本文不局限于点对点看待问题本硕本身,而是放在一个足够长的 ...
使用react的好处_聊一聊我对 React Context 的理解以及应用
前言 Context被翻译为上下文,在编程领域,这是一个经常会接触到的概念,React中也有. 在React的官方文档中,Context被归类为高级部分(Advanced),属于React的高级API ...
重磅 | 李飞飞最新演讲：ImageNet后，我专注于这五件事——视觉理解、场景图，段落整合、视频分割及CLEVR数据集
2017中国计算机大会(CNCC2017)于10月26日在福州海峡国际会展中心开幕,大会为期3天. 而就在今天上午,李飞飞.沈向洋.汤道生.马维英等重磅大咖纷纷登台演讲. 据悉,斯坦福大学人工智能实验 ...
React state和props使用场景
一个组件的显示状态可以由内部状态state.外部参数props所决定. props: 1.props 是从外部传进组件的参数,主要是父组件向子组件传递数据. 2.props 对于使用它的组件来说是只读 ...

说说对React refs 的理解？应用场景？

如何去使用？

使用场景

说说对React refs 的理解？应用场景？相关推荐

最新文章

热门文章