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

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

      大家好，我是极智视界，本文讲解一下 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>
	
	
	<script type="text/javascript" src="./react.development.js">script>
	
	<script type="text/javascript" src="./react-dom.development.js">script>
	
	<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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

      来看 焦点管理 事件的效果，用 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>
	
	
	<script type="text/javascript" src="./react.development.js">script>
	
	<script type="text/javascript" src="./react-dom.development.js">script>
	
	<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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45

      效果如下：

      可以看到使用 React.createRef() 分别创建了两个 ref (ref0 和 ref1)，来分别接收输入信息，两者是互相隔离的。


      好了，以上分享了 讲解 React 组件三大属性之三：refs。希望我的分享能对你的学习有一点帮助。


     【公众号传送】

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


    在这里插入图片描述

    扫描下方二维码即可关注我的微信公众号【极智视界】，获取我的更多经验分享，让我们用极致+极客的心态来迎接AI ！

  • 相关阅读:
    ubuntu 22.04 服务器网卡无IP地址
    web基础和http协议
    源码分析：规则引擎提交策略
    SpringCloud学习笔记-Eureka服务的搭建
    【前端】HTTP相关知识总结
    【C#】用于基于 UV DLP 的 3D 打印机的切片软件源码解析（一）DLP原理 & GUI
    Fiddler工具使用
    jvm06
    SpringBoot【运维实用篇】
    【数据结构】栈与队列的实现
  • 原文地址：https://blog.csdn.net/weixin_42405819/article/details/126163796