极智开发 | 讲解 React 组件三大属性之三：refs

Posted 2022-08-09 极智视界

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了极智开发 | 讲解 React 组件三大属性之三：refs相关的知识，希望对你有一定的参考价值。

欢迎关注我的公众号 [极智视界]，获取我的更多笔记分享

大家好，我是极智视界，本文讲解一下 React 组件三大属性之三：refs。

React 组件，从概念上类似于 javascript 函数，它接受任意的入参，并返回用于描述页面展示内容的 React 元素。React 组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。React 组件具有三大属性，即：state、props、refs。这里讲解三大属性之三：refs，要学习 state 和 props 的同学可以移步我的这两篇《极智开发 | 讲解 React 组件三大属性之一：state》、《极智开发 | 讲解 React 组件三大属性之二：props》。

文章目录

- 1. refs 理解
- 2. refs 示例

1. refs 理解

之前咱们已经讲了 state 和 props，我们知道 state 主要用来控制 组件状态，是 可读可写 的；props 主要用于 组件间 的信息传递，是只读的。而这里要讲的 refs，和前两个最主要的不同的地方是：咱们知道 react 和真实DOM 直接还隔着一个虚拟DOM，一般情况下咱们不会直接去操作真实DOM，像 state、props 也都是在虚拟DOM 中做一些数据操控，而 refs 不一样，refs 能够越过虚拟DOM 去直接操控真实DOM。由于在 react 中咱们大多数时间都在操控虚拟DOM，所以 refs 用到的频率是比较低的，那么在什么场景下会用到 refs 呢，react 官网给出了 refs 使用的几种场景：

焦点的管理、文本的选择、媒体的播放；
强制触发动画；
继承三方 DOM 库；

下面让我们来看几个示例。

2. refs 示例

来看一个 refs 焦点管理的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React组件属性之三：refs焦点管理</title>
</head>
<body>
	<div id="demo"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="./react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="./react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="./babel.min.js"></script>

	<script type="text/babel">
		//1. 创建组件
		class BlurRef extends React.Component
			alertInfo = ()=>
				const input = this.refs
				alert(input.value)
			
			render()
				return(
					<div>
						<input ref="input" onBlur=this.alertInfo type="demo" placeholder="失去焦点提示信息"/>
					</div>
				)
			
		
		// 2. 渲染组件到页面
		ReactDOM.render(<BlurRef/>,document.getElementById('demo'))
	</script>
</body>
</html>

来看焦点管理事件的效果，用 refs 来控制输入，在失去焦点的时候就 alert 提示信息：

再来说一下 createRef 的使用，React.createRef 调用后可以返回一个容器，该容器可以存储被 ref 所标识的节点，该容器是 专人专用 的，来看代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>React组件属性之三：createRef使用</title>
</head>
<body>
	<div id="demo"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="./react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="./react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="./babel.min.js"></script>

	<script type="text/babel">
		// 1. 创建组件
		class AlertRef extends React.Component
			// 创建两个ref
			ref0 = React.createRef()
			ref1 = React.createRef()
			// 点击button提示信息事件
			buttonAlertInfo = ()=>
				alert(this.ref0.current.value);
			
			// 失去焦点提示信息事件
			blurAlertInfo = ()=>
				alert(this.ref1.current.value);
			
			render()
				return(
					<div>
						<input ref=this.ref0 type="demo" placeholder="点击按钮提示数据"/>&nbsp;
						<button onClick=this.buttonAlertInfo>button</button>&nbsp;
						<input onBlur=this.blurAlertInfo ref=this.ref1 type="demo" placeholder="失去焦点提示信息"/>&nbsp;
					</div>
				)
			
		
		// 2. 渲染组件到页面
		ReactDOM.render(<AlertRef a="1" b="2"/>,document.getElementById('demo'))
	</script>
</body>
</html>