React中的refs是用来做什么的？

refs是什么？

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

使用方法

创建Refs
- 使用 React.createRef() 创建ref，并通过 ref 属性附加到 React 元素。

class MyComponent extends React.Component {constructor(props) {super(props);this.myRef = React.createRef();}render() {return <div ref={this.myRef} />;}
}

访问Refs
- 当 ref 被传递给 render 中的元素时，对该节点的引用可以在 ref 的 current 属性中被访问。

const node = this.myRef.current;

回调refs

不同于传递 createRef() 创建的 ref 属性，你会传递一个函数。这个函数中接受 React 组件实例或 HTML DOM 元素作为参数，以使它们能在其他地方被存储和访问。

官网例子：点击时自动获取输入框焦点

React 将在组件挂载时，会调用 ref 回调函数并传入 DOM 元素，当卸载时调用它并传入 null。在 componentDidMount 或 componentDidUpdate 触发前，React 会保证 refs 一定是最新的。

class CustomTextInput extends React.Component {constructor(props) {super(props);this.textInput = null;this.setTextInputRef = element => {this.textInput = element;};this.focusTextInput = () => {// 使用原生 DOM API 使 text 输入框获得焦点if (this.textInput) this.textInput.focus();};}componentDidMount() {// 组件挂载后，让文本框自动获得焦点this.focusTextInput();}render() {// 使用 `ref` 的回调函数将 text 输入框 DOM 节点的引用存储到 React// 实例上（比如 this.textInput）return (<div><inputtype="text"ref={this.setTextInputRef}/><inputtype="button"value="Focus the text input"onClick={this.focusTextInput}/></div>);}
}

适用场景

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

React中的refs是用来做什么的？相关推荐

React 中的 refs
Refs Refs是什么 Refs 提供一种访问在render方法中DOM节点或者React元素的方式. Refs作用你可以通过它获得DOM节点或者React元素.一般用在处理焦点,文本选择,触发动 ...
React属性之Refs
React属性之Refs 1 介绍 2 使用方法 2.1 createRef(版本>=React16.3) 2.2 回调Refs 2.3 String类型的Refs(已过时,不推荐使用) 2.4 ...
React中refs的理解
React中refs的理解 Refs提供了一种方式,允许我们访问DOM节点或在render方法中创建的React元素. 描述在典型的React数据流中,props是父组件与子组件交互的唯一方式,要修 ...
[react] react中可以在render访问refs吗？为什么？
[react] react中可以在render访问refs吗?为什么? <><span id="name" ref={this.spanRef}>{this ...
[react] 在React中我们怎么做静态类型检测？都有哪些方法可以做到？
[react] 在React中我们怎么做静态类型检测?都有哪些方法可以做到? flow 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣 ...
React中的PureComponent，refs
文章目录 PureComponent refs vue中的ref react中父组件给子组件传值子组件给父组件传值 react中的逐层传递 PureComponent 如果父组件的属性和状态发生改变 ...
react中context到底是如何传递的-源码分析
react中使用context 基本要求就是父组件中声明Parent.prototype.getChildContext 父组件中声明Parent.childContextType 子组件声明 Ch ...
echarts setoption方法_在Vue和React中使用ECharts的多种方法
前言俗话说:"工欲善其事,必先利其器".现如今已经有许多成熟易用的可视化解决方案,例如ECharts,AntV等等.我们可以把这些解决方案比作是一套套成熟的"工具&qu ...
如何在React中做到jQuery-free
前言前些天在订阅的公众号中看到了以前阮一峰老师写过的一篇文章,「如何做到 jQuery-free?」.这篇文章讨论的问题,在今天来看仍不过时,其中的一些点的讨论主要是面向新内核现代浏览器的标准 DO ...