React 中的 refs

Refs
Refs是什么

Refs 提供一种访问在render方法中DOM节点或者React元素的方式。

Refs作用

你可以通过它获得DOM节点或者React元素。一般用在处理焦点,文本选择,触发动画,触发方法等。例如，有一个CheckBox组件，你可以通过Refs获得该React元素，然后主动触发它的onClick方法：

<TouchableOpacity onPress={()=>{this.cb.onClick();}><CheckBox ref={(c)=>{this.cb = c;}}onClick={()=>{console.log(‘clicked’);}}></CheckBox>
</TouchableOpacity>

Refs的使用

创建 Refs

1. 使用 React.createRef() 创建 refs

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

可以使用current属性，对节点的引用进行访问。

class CustomTextInput extends React.Component {constructor(props) {super(props);// 创建 ref 存储 textInput DOM 元素this.textInput = React.createRef();this.focusTextInput = this.focusTextInput.bind(this);}focusTextInput() {// 直接使用原生 API 使 text 输入框获得焦点// 注意：通过 "current" 取得 DOM 节点this.textInput.current.focus();}render() {// 告诉 React 我们想把 <input> ref 关联到构造器里创建的 `textInput` 上return (<div><inputtype="text"ref={this.textInput} /><inputtype="button"value="Focus the text input"onClick={this.focusTextInput}/></div>);}
}

React 会在组件加载时将 DOM 元素传入 current 属性，在卸载时则会改回 null。ref 的更新会发生在componentDidMount 或 componentDidUpdate 生命周期钩子之前。

2. 回调形式创建 refs

<TouchableOpacity onPress={()=>{this.cb.onClick();}><CheckBox ref={(c)=>{this.cb = c;}}onClick={()=>{console.log(‘clicked’);}}></CheckBox>
</TouchableOpacity>

Refs知识点

不要过度使用Refs，如果可以通过声明实现，则尽量避免使用refs；
不能在函数式组件上使用ref属性（就是function定义的组件，不是class），因为它们没有实例；
ref 的更新会发生在componentDidMount 或 componentDidUpdate 生命周期钩子之前。所以不能在组件卸载的时候直接使用ref的react元素，React 会在组件卸载时将ref 改回 null。

React 中的 refs相关推荐

React中的refs是用来做什么的？
refs是什么? React 中的 Refs提供了一种方式,允许我们访问 DOM节点或在 render方法中创建的 React元素本质为ReactDOM.render()返回的组件实例,如果是渲染组 ...
React属性之Refs
React属性之Refs 1 介绍 2 使用方法 2.1 createRef(版本>=React16.3) 2.2 回调Refs 2.3 String类型的Refs(已过时,不推荐使用) 2.4 ...
[react] react中可以在render访问refs吗？为什么？
[react] react中可以在render访问refs吗?为什么? <><span id="name" ref={this.spanRef}>{this ...
React中refs的理解
React中refs的理解 Refs提供了一种方式,允许我们访问DOM节点或在render方法中创建的React元素. 描述在典型的React数据流中,props是父组件与子组件交互的唯一方式,要修 ...
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 ...
React中ref的使用方法
React中ref的使用方法在react典型的数据流中, props 传递是父子组件交互的唯一方式:通过传递一个新的 props 值来使子组件重新 re-render ,从而达到父子组件通信.当然, ...

React 中的 refs

Refs
Refs是什么

Refs作用

Refs的使用

创建 Refs

2. 回调形式创建 refs

Refs知识点

React 中的 refs相关推荐

最新文章

热门文章

React 中的 refs

Refs Refs是什么

Refs作用

Refs的使用

创建 Refs

2. 回调形式创建 refs

Refs知识点

React 中的 refs相关推荐

最新文章

热门文章

Refs
Refs是什么