根据使用React的版本，选择合适的方法。

  1. 字符串模式 ：废弃不建议使用
  2. 回调函数，React版本 < 16.3
  3. React.createRef() ：React版本 >= 16.3

回调函数

特点

  • 可以优雅在组件销毁时回收变量。每次组件重新渲染的时候，行内函数都会执行两次，第一次的ele的值为空，第二次才为真正的DOM对象，因为在每次渲染中React都会 创建一个新的函数实例；
  • 很好的支持静态类型检测；
  • 针对数组遍历时可以直接转换为对应的数组， CodePen示例；
  • 可以将父组件的ref 传入 孙组件。

【持久化方法】 因为存在回收变量的特点，会导致有些时刻ref会变成null，要想在初始化的时候讲ref持久化下来，可以通过将 ref 的回调函数定义成类的静态函数的方式解决。

回调函数 CodePen示例

createRef

React V16版本新增一个API：React.createRef(); 通过这个API，我们可以先创建一个ref变量，然后再将这个变量赋值给组件声明中ref属性就好了。

不同在于，需要通过 this.textInput.current，即真实的DOM是通过current属性来引用的。

CodePen示例

React中refs持久化的更多相关文章

  1. react中数据持久化缓存redux-persist

    一.安装redux-persist: npm install redux-persist --save 二..babelrc中增加redux-persist配置: "plugins" ...

  2. React 中 refs 的作用是什么？

    Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄.我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄,该值会作为回调函数的第一个参数返回 ...

  3. 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法

    一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...

  4. Immutable 详解及 React 中实践

    本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万 ...

  5. react中input自动聚焦问题

    input自动聚焦问题 在react中可以使用refs解决这个问题,首先看一下refs的使用场景: (1)处理焦点.文本选择或媒体控制. (2)触发强制动画. (3)集成第三方 DOM 库. 使用re ...

  6. react中这些细节你注意过没有？

    react中的一些细节知识点: 1.组件中get的使用(作为类的getter) ES6知识:class类也有自己的getter和setter,写法如下: Class Component { const ...

  7. React中ref的使用方法

    React中ref的使用方法 在react典型的数据流中,props传递是父子组件交互的唯一方式:通过传递一个新的props值来使子组件重新re-render,从而达到父子组件通信.当然,就像reac ...

  8. React中ref的用法

    在React数据流中,父子组件唯一的通信方式是通过props属性:那么如果有些场景需要获取某一个真实的DOM元素来交互,这时候就要用到React的refs属性. 1.可以给DOM元素添加ref属性 c ...

  9. Immutable学习及 React 中的实践

    为什么用immutable.js呢.有了immutable.js可以大大提升react的性能. JavaScript 中的对象一般是可变的(Mutable),因为使用了引用赋值,新的对象简单的引用了原 ...

随机推荐

  1. Chapter 02—Creating a dataset(Part1)

    一. 数据集 1. 在R语言中,进行数据分析的第一步是创建一个包含待研究数据并且符合要求的数据集. · 选择装数据的数据结构 · 把数据装入数据结构中 2. 理解数据集 (1)数据集通常是矩形的数据列 ...

  2. mac安装numpy,scipy,matplotlib

      SaintKings-Mac-mini:~ saintking$ python Python ( , ::) [GCC Compatible Apple LLVM (clang-)] on dar ...

  3. 洛谷 题解 CF1151D 【Stas and the Queue at the Buffet】

    本蒟蒻又双叒叕被爆踩辣!!! 题目链接 这道题我个人觉得没有紫题的水平. 步入正题 先看题: 共有n个人,每个人2个属性,a,b; 窝们要求的是总的不满意度最小,最满意度的公式是什么? \(ai * ...

  4. Redis 命令执行过程(下)

    在上一篇文章中<Redis 命令执行过程(上)>中,我们首先了解 Redis 命令执行的整体流程,然后细致分析了从 Redis 启动到建立 socket 连接,再到读取 socket 数据 ...

  5. Codeforces-527c

    Leonid wants to become a glass carver (the person who creates beautiful artworks by cutting the glas ...

  6. Selenium之勾选框操作

    勾选框操作:       所谓勾选框,意思是可以勾选一个及以上或全部勾选.勾选框的图标一般都是方形的. 复选框勾选一般分为三种情况: ①勾选单个框,我们直接用元素定位的方式定位到点击即可. ②勾选多个 ...

  7. 最高分辨率行间转移CCD图像传感器 - KAI-47051 演示视频

    http://www.onsemi.cn/PowerSolutions/supportVideo.do?docId=1002912

  8. php 温故而知新 好久不用 又得继续学习下

    1.php注释:/* */.//.#等三种方式2.echo:向浏览器输出字符串,echo其实是一个函数:返回值:无3.print:向浏览器输出字符串,它也是一个函数:返回值:整型.           ...

  9. 介绍一款自己实现的rabbit轻量级组件和使用方法

    DotNetCore.RabbitMQ.Extensions介绍 这是一个 基于.NETStandard 2.0的Rabbit轻量级框架,可以让开发人员无需关注底层变动,专注编写业务代码,从而达到便捷 ...

  10. mybatis第一篇

    1.mybatis介绍 1.介绍 ​ MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google co ...