携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第 8 天，点击查看活动详情
欢迎关注我的公众号 [极智视界]，获取我的更多笔记分享
大家好，我是极智视界，本文讲解一下 React 组件三大属性之三：refs。
React 组件，从概念上类似于 JavaScript 函数，它接受任意的入参，并返回用于描述页面展示内容的 React 元素。React 组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。React 组件具有三大属性，即：state、props、refs。这里讲解三大属性之三：refs，要学习 state 和 props 的同学可以移步我的这两篇《极智开发 | 讲解 React 组件三大属性之一：state》、《极智开发 | 讲解 React 组件三大属性之二：props》 。
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="点击按钮提示数据"/>
<button onClick={this.buttonAlertInfo}>button</button>
<input onBlur={this.blurAlertInfo} ref={this.ref1} type="demo" placeholder="失去焦点提示信息"/>
</div>
)
}
}
// 2. 渲染组件到页面
ReactDOM.render(<AlertRef a="1" b="2"/>,document.getElementById('demo'))
</script>
</body>
</html>
效果如下：
可以看到使用 React.createRef() 分别创建了两个 ref (ref0 和 ref1)，来分别接收输入信息，两者是互相隔离的。
好了，以上分享了 讲解 React 组件三大属性之三：refs。希望我的分享能对你的学习有一点帮助。
【公众号传送】
