根据使用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. [ch04-03] 用神经网络解决线性回归问题

    系列博客,原文在笔者所维护的github上:https://aka.ms/beginnerAI, 点击star加星不要吝啬,星越多笔者越努力. 4.3 神经网络法 在梯度下降法中,我们简单讲述了一下神 ...

  2. 浅谈ZooKeeper基本原理与源码分析

    最近一直有小伙伴私信我,问一些关于Zookeeper的知识,下边关于的Zookeeper的知识整理了一下,一起学习一下. 看完本文对于Zookeeper想深入全面了解的读者朋友们,小编这里整理了一份更 ...

  3. java 运算符&表达式

    1. java中,模运算符%可以获取整数除法的余数,同样适用于浮点类型数据.double y = 23.56; y%5;(即y mod 5 =3.56) [c/c++中,要求%两侧均为整数数据.] 2 ...

  4. Tomcat介绍、安装JDK、安装Tomcat

    6月26日任务 16.1 Tomcat介绍16.2 安装jdk16.3 安装Tomcat扩展java容器比较 http://my.oschina.net/diedai/blog/271367 http ...

  5. LNMP架构源码搭建（centos7）

    第一步:安装nginx 1.上传或下载nginx,并解压 yum -y install lrzsz rz .tar.gz 2.搭建nginx安装环境 yum -y install gcc-c++ zl ...

  6. Linux安装图像页面的命令

    在shell里输入: sudo apt-get install x-window-system-core #安装x-windows的基础 sudo apt-get install gdm #安装登录管 ...

  7. 串的匹配算法--C语言实现

    串这种数据结构,使用是比较多的,但是它的一些方法在更高级的语言中,比如Java,Python中封装的比较完整了.在这里,我只写了串中使用最多的匹配算法,即串的定位操作.串的匹配算法常用的两种就是朴素匹 ...

  8. 全新一代云服务器S6，重新定义性价比

    S6通用计算型云服务器,搭载全新一代处理器,配套华为自研高性能智能网卡,计算与网络性能全面升级.S6进一步强化高性价比定位,满足企业性能要求的同时,降低中小企业上云成本. 更多详情请访问ECS产品介绍 ...

  9. 使用Cocoapods创建私有podspec

    Cocoapods是非常好用的一个iOS依赖管理工具,使用它可以方便的管理和更新项目中所使用到的第三方库,以及将自己的项目中的公共组件交由它去管理.Cocoapods的介绍及优点本文就不在赘述,我开始 ...

  10. CodeForces-1006B-Polycarp's Practice

    B. Polycarp's Practice time limit per test 2 seconds memory limit per test 256 megabytes input stand ...