(React入门)ref

React之ref

ref 简介

React提供的这个ref属性，表示为对组件真正实例的引用，其实就是ReactDOM.render()返回的组件实例；需要区分一下，ReactDOM.render()渲染组件时返回的是组件实例；而渲染dom元素时，返回是具体的dom节点。

字符串引用

ref可以设置为字符串值,这种方式基本不推荐使用，或者在未来的react版本中不会再支持该方式，但是可以了解一下。

<input ref="inputRef" />

然后在其他地方如事件回调中通过this.refs.input可以访问到该组件实例，其实就是dom元素节点。

let inputEl = this.refs.input;
//然后通过inputEl来完成后续的逻辑，如focus、获取其值等等

回调函数引用

React 支持给任意组件添加特殊属性。ref 属性接受一个回调函数，它在组件被加载或卸载时会立即执行。

当给 HTML 元素添加 ref 属性时，ref 回调接收了底层的 DOM 元素作为参数。
当给组件添加 ref 属性时，ref 回调接收当前组件实例作为参数。
当组件卸载的时候，会传入null
ref 回调会在componentDidMount 或 componentDidUpdate 这些生命周期回调之前执行。

HTML 元素添加 ref 属性时

import React, { Component } from 'react'
export default class App extends Component {refcb(instance) {console.log(instance);}render() {return (<div><input ref={this.refcb} /></div>)}
}
//控制台打印当前dom元素input的实例

import React, { Component } from 'react'
export default class App extends Component {showInputDom = () =>{const {userNameInput} = thisconsole.log(userNameInput);}render() {return (<div><input ref={(c)=>{this.userNameInput = c}} /><button onClick={() => { this.showInputDom() }}>Click</button></div>)}
}
//控制台打印当前dom元素input的实例

组件添加 ref 属性

import React, { Component } from 'react'
import Son from "./Son"
export default class App extends Component {state = { visible: true }changeVisible() {this.setState({ visible: !this.state.visible });}refcb(instance) {console.log(instance);}render() {return (<div><button onClick={() => { this.changeVisible() }}>{!this.state.visible ? "挂载" : "卸载" }</button>{this.state.visible ? <Son ref={this.refcb}></Son> : null}</div>)}
}

上述代码，渲染到页面时可以发现console.log打印出对应的组件实例。点击按钮时，<Son/>组件也在挂载与卸载之间切换，所以能看到null和组件实例的结果。

React.createRef()

在React 16.3版本后，使用此方法来创建ref。将其赋值给一个变量，通过ref挂载在dom节点或组件上，该ref的current属性将能拿到dom节点或组件的实例

import React, { Component } from 'react'
export default class App extends Component {myref =React.createRef()handleClick = () => {console.log(this.myref.current);}render() {return (<div><input ref={this.myref} /><button onClick={() => { this.handleClick() }}>Click</button></div>)}
}

上述代码点击Click按钮打印出对应dom元素input的实例

(React入门)ref相关推荐

React入门看这篇就够了
2019独角兽企业重金招聘Python工程师标准>>> 摘要: 很多值得了解的细节. 原文:React入门看这篇就够了作者:Random Fundebug经授权转载,版权归原作者所 ...
《慕课React入门》总结
React 入门与实战 react组件虚拟DOM的概念这是React性能高效的核心算法 React为此引入了虚拟DOM(Virtual DOM)的机制.基于React进行开发时所有的DOM构造都是 ...
React 入门学习笔记2
摘自阮一峰:React入门实例教程,转载请注明出处. 一.获取真实的DOM节点组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM).只有当它 ...
react入门（1）之阮一峰react教程
阮一峰老师的github地址:React Demos React 入门实例教程 1.HTML模板 <!DOCTYPE html> <html><head>// re ...
B站尚硅谷React入门教程
视频链接:React全家桶(技术栈) 第1章:React入门 1.1. React简介 1.1.1 官网英文官网: https://reactjs.org/ 中文官网: https://react. ...
Very Good!!! - React 入门实例教程
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
[转]React 入门实例教程
React 入门实例教程作者: 阮一峰日期: 2015年3月31日现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获 ...
React入门（上）
本篇博客为本人学习react的入门记录笔记,参考资料来之柴柴老师在b站分享的react学习视频,仅供学习参考,学习视频是来自于b站的:柴柴_前端教书匠视频链接:React入门到实战(2022全网最新 ...
React 入门实例教程(原作者：阮一峰)
转载(http://www.ruanyifeng.com/blog/2015/03/React.html) 现在最热门的前端框架,毫无疑问是 React . 上周,基于 react 的 React N ...