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

极智开发 | 讲解 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​​ 焦点管理的示例：

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

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

效果如下：

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

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

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。