根据使用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. centos 7 MysSQL 5.6.39 源码安装

    MySQL 5.6.39 二进制安装 CentOS 7 将默认数据库MySQL替换成了Mariadb. 这里会从系统的环境准备开始一步一步安装. 环境准备 系统版本 内核版本 IP地址 Centos ...

  2. gganimate|创建可视化动图，让你的图表会说话

    本文首发于“生信补给站”公众号,https://mp.weixin.qq.com/s/kKQ2670FBiDqVCMuLBL9NQ 更多关于R语言,ggplot2绘图,生信分析的内容,敬请关注小号. ...

  3. list列表操作

    li = [1,2,3,4,'4','456'] print(li.index('4')) # print(li.index('45')) l_a = ['1234567','7890'] l_b = ...

  4. 第三章 学习Shader所需的数学基础（5）

    1. Unity Shader的内置变量(数学篇) 使用Unity写shader的一个好处在于,它提供了很多内置参数,这使得我们不在需要自己手动算一些值.本文给出Unity内置的用于空间变换和摄像机以 ...

  5. 小白学 Python 爬虫（14）：urllib 基础使用（四）

    人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Li ...

  6. Nginx 404 Not Found 解决办法

    环境:宝塔Nginx面板 解决办法: 宝塔面板--站点设置-配置文件. 去掉:   error_page 404 /404.html; 前面的 # 号.

  7. 制作通用framework的几点注意

    一.创建framework,调成静态的framework . 二.匹配bitcode 三.增加-ObjC 在BuildSettting ->Linking->Other Linker Fl ...

  8. IOS UISwitch 控件

    转自:http://my.oschina.net/wolx/blog/396680 一 UISwitch 简介 二 UISwitch 创建 三设置选中状态 四 添加监听 五 测试代码 5.1 代码 5 ...

  9. react-native 信鸽推送集成

    目录 一. git链接: react-native-xinge-push 1.1 安装 1.2. link 二. android配置 2.1. android/settings.gradle 2.2. ...

  10. Swap Digits

    Description ) in the first line, which has the same meaning as above. And the number is in the next ...