1. refs

React核心就在于虚拟DOM，也就是在React中不总是直接操作页面真实的DOM元素，并且结合Diffing算法，可以做到最小化页面重绘。最为直观的为：

在使用数组的map方法返回一个子元素的时候，通常需要指定一个key值，而这个key值就是用于diffing算法的对比关键，这里不详细介绍，将在下小节进行简单介绍。

但有些时候不可避免的我们需要一种方法可以操作我们定义的元素标签，并作出对应的修改。在React中提供了一种访问DOM节点的方式，也就是这里的refs。

在[官网](Refs and the DOM – React (docschina.org))中也给出了下面几种应用场景：

管理焦点，文本选择或媒体播放。
触发强制动画。
集成第三方 DOM 库。

下面来一个简单的案例来体验一下所说的场景。

class RefsExample extends Component {handleSubmit = (event) => {// 获取数据进行判断逻辑let username = this.usernameRef.current.valuelet password = this.passwordRef.current.valueif(!(username === '123' && password === '1')) {event.preventDefault()alert("信息不正确！")}}constructor() {super();this.usernameRef = React.createRef()this.passwordRef = React.createRef()}render() {return (<form action='' onSubmit={this.handleSubmit}>用户名：<input ref={this.usernameRef} type='text'/><br/>密 码：<input ref={this.passwordRef} type='password'/><br/><button>提交</button></form>);}
}

注意到，上面的代码中我们使用了React.createRef()来创建一个ref引用，继而可以直接使用这个引用来获取到用户输入的值。

事实上，在React中提供了不止一种创建ref引用的方式，一共可以分为三种，下面分别介绍。

2. refs的分类

2.1 字符串形式的ref

在官网文档中也标记了过时的API。它已过时并可能会在未来的版本被移除。在render方法中使用字符串定义一个ref：

other：<p ref='wenben'>文本</p>

然后在js调用处处理：

console.log(this.refs.wenben)

值得注意的是，在webstrom工具中已经标记了删除线：

2.2 回调函数方式的ref

标准叫法为称为“回调 refs”。它能助你更精细地控制何时 refs 被设置和解除。其实也就是在标签中使用ref来传入一个回调函数，比如下面的案例：

class RefsExample extends Component {handleSubmit = (event) => {// 获取数据进行判断逻辑let username = this.usernameRef.current.valuelet passwd = this.userPassword.valueif (!(username === 'root' && passwd === '123')) {event.preventDefault()alert("信息不正确！")}}constructor() {super();this.usernameRef = React.createRef()}// 获取焦点focusTextInput = (element) => {this.userPassword = element  // 将当前元素的对象保存起来}render() {return (<form action='' onSubmit={this.handleSubmit}>用户名：<input ref={this.usernameRef} type='text'/><br/>密 码：<input ref={this.focusTextInput} type='password'/><br/><button>提交</button></form>);}
}

2.3 createRef

也即是这篇文章的开篇第一个案例，就不再重复介绍：

this.passwordRef = React.createRef()

3. 关于refs的说明

默认情况下，你不能在函数组件上使用ref属性，因为它们没有实例；
如果要在函数组件中使用ref，你可以使用forwardRef，或者可以将该组件转化为 class 组件；
ref会在componentDidMount或componentDidUpdate生命周期钩子触发前更新；
勿过度使用 Refs；

React基础—refs介绍相关推荐

React基础 - refs的详解与应用
文章目录 ref的使用场景操作原始DOM class组件 1. React.createRef(推荐) 2. 回调函数方式 3. string 方式(不推荐) function组件操作 React ...
React基础第一天-jsx
React 基础整体介绍内容介绍 React 概述 JSX React 组件基础 React 介绍目标了解react的基本概念, 是什么 React 官网 React 中文网 React 官网 ...
【React 基础】之 React 基本介绍、jsx 规则、模块与组件
React 全家桶 React 基础 React-Router 路由 PubSub + 消息管理库 Redux 集中式的状态管理 Ant-Design UI 组件库 - React 简介官网英文官 ...
react方法返回html_React全家桶之React基础(推荐新手必看)
学习目标安装create-react-app脚手架熟练React基础语法掌握JSX语法掌握setState 掌握React生命周期掌握props传递参数掌握React组件通信资源 rea ...
react基础知识1
React基础知识1 一.React的基本认识 1.1 官网:https://reactjs.org/ 1.2 介绍描述 <1> 用于构建用户界面的 JavaScript 库(只关注于Vi ...
react基础_React基础
react基础 After all my teachings about React, be it online for a larger audience or on-site for compan ...
[React 基础系列] 受控表单 vs 不受控表单
[React 基础系列] 受控表单 vs 不受控表单受控表单 refs 不受控表单不受控组件总结之前的学习部分带了一些表单内容的使用--之前的案例基本上是用的都是 input,接下来就学习一下 ...
React 基础案例 | 支持左右按钮点击查看信息的卡片组件（二）
一.开篇大家好,本篇文章小编将和大家一起实现一个用左右点击的方式翻看卡片信息的组件,这个组件很常用,一般会在网站上显示案例或团队成员的信息.通过本案例我们继续练习 useState Hook 在实际 ...
从零开始，教你用Webpack构建React基础工程
20170415更新推荐大家使用facebook官方构建工具facebookincubator/create-react-app来创建React基础工程前言随着前端代码越来越多,越来越复杂,整个 ...

React基础—refs介绍