根据使用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. CSS3(1)---圆角边框、边框阴影

    CSS3(1)---圆角边框.边框阴影 CSS3可以简单理解成是CSS的增强版,它的优点在于不仅有利于开发与维护,还能提高网站的性能. 一.圆角边框 圆角在实际开放过程中,还是蛮常见的.以前基本是通过 ...

  2. Creating your first iOS Framework

    转自:https://robots.thoughtbot.com/creating-your-first-ios-framework If you’ve ever tried to create yo ...

  3. 去除npm run dev日志warn记录

    目录 一 babel的一些eslint方法废除了 问题 解决方案 相关文档 二 webpack的loaderUtils.parseQuery()被废弃了 问题 解决方案 相关文档 三 postcss相 ...

  4. [TimLinux] CPU 常见架构介绍

    1. 简介 系统性能依赖硬件架构,CPU架构决定了硬件的布局.常见的CPU架构:SMP, NUMA, MPP. 2. SMP(对称多处理器) SMP:Symmetric Multiprocessing ...

  5. [TimLinux] myblog 页面Axure设计

    1. 导航 2. 首页主体 3. 侧边栏 4. 页尾 5. 使用工具 Axure RP 8.0.0.3312 Pro版本.

  6. hdu3791二叉搜索树

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3791 题意:给定一个n(多组,n为0时结束),给一个串和n个串,分别判断n个串按序列构建的二叉搜索树和 ...

  7. css Backgroud-clip (文字颜色渐变)

    首先来瞄一下background-clip,这个属性是干嘛的? 顾名思义,背景裁剪...   按照我自己的理解就是背景的显示区域 此处粘上MDN的示例链接(嫌麻烦的,后面我也贴上截图)https:// ...

  8. 转-友晶Sdram_Control_4Port的全页操作Bug？

    http://www.cnblogs.com/edaplayer/p/3678897.html 以前在学校初学fpga的时候碰到sdram就搞不定了,现在突然发现网上有好多现成的代码,友晶的,alte ...

  9. Day 09 作业

    简述定义函数的三种方式 有参函数, 无参函数, 空函数 简述函数的返回值 函数内部代码经过一系列的逻辑处理返回的结果 简述函数的参数 函数的参数分形参和实参 形参: 定义函数阶段, 括号内定义的参数, ...

  10. 大数据学习笔记——HDFS理论知识之编辑日志与镜像文件

    HDFS文件系统——编辑日志和镜像文件详细介绍 我们知道,启动Hadoop之后,在主节点下会产生Namenode,即名称节点进程,该节点的目录下会保存一份元数据,用来记录文件的索引,而在从节点上即Da ...