根据使用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. php mysql 中文乱码解决，数据库显示正常，php调用不正常

    一般来说,乱码的出现有2种原因,首先是由于编码(charset)设置错误,导致浏览器以错误的编码来解析,从而出现了满屏乱七八糟的“天书”,其次是文件被以错误的编码打开,然后保存,比如一个文本文件原先是 ...

  2. thinkPHP5开发智慧软文遇到的分页第二页不显示数据的问题

    在进行结果查询进行分页的时候,发现分页第一页数据正常,第二页没有数据,后面问题一样,这个是因为直接使用了: 如果此处使用如下语句: $lst=NewsModel::order('sendtime de ...

  3. WebGPU学习（三）:MSAA

    大家好,本文学习MSAA以及在WebGPU中的实现. 上一篇博文 WebGPU学习(二): 学习"绘制一个三角形"示例 下一篇博文 WebGPU学习(四):Alpha To Cov ...

  4. 车标知识学习网页开发，与Flask通过base64展示二进制图片 #华为云·寻找黑马程序员#

    万法同源 一直觉得可能自己不太适合搞技术,更适合在天桥底下支个摊子说书.技术的东西从来没人关注,扯东扯西的文章莫名的火.之前的一篇文章MarkDown添加图片的三种方式不管是在技术为主的CSDN还是娱 ...

  5. 【nodejs原理&源码赏析（5）】net模块与通讯的实现

    [摘要] Node.js net模块的原理及使用 示例代码托管在:http://www.github.com/dashnowords/blogs 一. net模块简介 net模块是nodejs通讯功能 ...

  6. nginx反向代理、负载均衡

    什么叫反向代理? A用户--> B(在和C同一个机房,并且有公网)--> C(不带公网的机器) 什么场景下会用到反向代理? 1.访问不带公网的内网机器 2.解决两台之间通信有障碍的问题 编 ...

  7. 学习之Redis（一）

    一.redis简介 一般学习,最好先去官网,之所以建议看官网,是因为这是一手的学习资料,其他资料都最多只能算二手,一手资料意味着最权威,准确性最高.https://redis.io/topics/in ...

  8. 数据库Oracle的含义

    数据库的含义: 所谓的数据库其实就是数据的集合.用户可以对集合中的数据进行新增.查询.更新. 删除等操作.数据库是以一定方式储存在一起.能与多个用户共享.具有尽可能小的冗余度. 与应用程序彼此独立的数 ...

  9. CoderForces 163E e-Government(AC自动机+树状数组维护fail树的dfs序)

    E. e-Government time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...

  10. Linux中sed基础

    sed是一种流编辑器,它是文本处理中非常重要的工具,能够完美的配合正则表达式使用,功能不同凡响.处理时,把当前处理的行存储在临时缓冲区中,称为"模式空间"(pattern spac ...