cp : https://blog.csdn.net/liwusen/article/details/53384561

1.什么是ReactJS中的refs

在React中组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual

DOM)。只有当它插入文档以后,才会变成真实的 DOM 。根据 React 的设计,所有的 DOM 变动,都先

在虚拟 DOM 上发生,然后再将实际发生变动的部分,反映在真实 DOM上,这种算法叫做 DOM diff ,它

可以极大提高网页的性能表现。

如果我们想在虚拟DOM时(此时DOM还没有转化为真是DOM),取到某一个元素,此时不能通过

JS的getElementByXXX这种形式。

2.ReactJS前期的做法

前期在虚拟DOM阶段取元素,语法如下:

  1. function Hello(){
  2. handleClick:function(){
  3. this.refs.myinput.fucus();
  4. }
  5. return <input ref="myinput" />
  6. }

从上述我们可以知道可以通过refs.[refsName]来取得虚拟DOM中的元素。

3.ReactJS最新版本,对于refs的定义

关于refs的定义在最新版本中,并没有变化,但是使用语法有了很大的改变。

现在组件中的refs是一个回调函数。

这个函数,在组件生成期(mounted)

会自动执行,这个回调函数的参数是元素本身:

  1. function Hello(){
  2. handleClick:function(){
  3.  
  4. }
  5. return <input ref={(input)=>{this.myinput=input;}}/>
  6. }

在这个例子中,ref的函数,传入了input元素本身,并且将this.myinput赋值为input元素本身。

在元素的销毁期(unmounted)也会执行,但是在销毁期,无论如何只会返回null。

  1.  
  1.  

[Web 前端] React高级教程(es6)——(2)对于Refs最新变动的理解的更多相关文章

  1. Web前端-JavaScript基础教程上

    Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...

  2. Web前端-JavaScript基础教程下

    Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...

  3. 史上最全的web前端系统学习教程!

    这份资料整理花了近7天,如果感觉有用,可以分享给更有需要的人. 在看接下的介绍前,我先说一下整理这份资料的初衷: 我的初衷是想帮助在这个行业发展的朋友和童鞋们,在论坛博客等地方少花些时间找资料,把有限 ...

  4. Web前端性能优化教程05:网站样式和脚本

    本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:网站样式和脚本代码的放置位置.使用外部javascript和css.完整教程可查看:Web前端性能优化 一.将样式表放在顶部 可视性回馈的重要 ...

  5. Web前端性能优化教程09:图像和Cookie优化

    本文是Web前端性能优化系列文章中的第九篇,主要讲述内容:图像和Cookie优化.完整教程可查看:  一. 图像优化 图像基础知识 gif: 适用于动画效果,例如提示的滚动条图案 jpg: 是一种使用 ...

  6. Web前端性能优化教程06:减少DNS查找、避免重定向

    本文是Web前端性能优化系列文章中的第六篇,主要讲述内容:减少DNS查找.避免重定向.完整教程可查看:  一.减少DNS查找 基础知识 DNS(Domain Name System): 负责将域名UR ...

  7. Web前端性能优化教程08:配置ETag

    本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:配置ETag.完整教程可查看:Web前端性能优化 什么是ETag? 实体标签(EntityTag)是唯一标识了一个组件的一个特定版本的字符串, ...

  8. Web前端性能优化教程03:添加Expires头

    本文是Web前端性能优化系列文章中的第三篇,主要讲述添内容:加Expires头.完整教程可查看:Web前端性能优化 什么是Expires头? Expires存储的是一个用来控制缓存失效的日期.当浏览器 ...

  9. Web前端性能优化教程04:压缩组件

    本文是Web前端性能优化系列文章中的第四篇,主要讲述内容:压缩组件.完整教程可查看:Web前端性能优化 基础知识 gzip编码:gzip是GUNzip的缩写,是使用无损压缩算法的一种,最早是用于Uni ...

随机推荐

  1. day--14前端(HTML、CSS)

    浏览器相当于客户端,浏览器访问服务端,收到消息之后里面断开,一次请求,一次响应,一次断开.     Web框架本质    http://www.cnblogs.com/wupeiqi/articles ...

  2. 【BZOJ】3456: 城市规划(多项式求ln)

    题解 在我写过分治NTT,多项式求逆之后 我又一次写了多项式求ln 我们定义一个数列的指数型生成函数为 \(\sum_{i = 0}^{n} \frac{A_{i}}{i!} x^{i}\) 然后这个 ...

  3. [C] 错误笔记:函数调用——值传递

    前提: 写一个函数,功能为在堆内开辟一块空间,并将首地址以函数参数的形式返回主调函数 错误demo void test(char *a) { ] = "hello"; printf ...

  4. Jmeter脚本录制方法(一)分别使用Badboy录制和Jmeter自带的代理服务器录制

    Jmeter录制方式分三种,分别是:使用Badboy录制.Jmeter自带的代理服务器录制和手工录制,今天先介绍前两种录制方法. Badboy录制 Badboy是用C++开发的动态应用测试工具, 其拥 ...

  5. [转]LCT讲解

    LCT (1)维护一个序列,支持下列操作: 区间求和 区间求最值 区间修改 求连续子段和 这个线段树就可以解决 具体做法不加累述了 (2)维护一个序列,支持下列操作: 区间求和 区间求最值 区间修改 ...

  6. 统计Mongo数组中相同对象的属性之和

    统计Mongo数组中相同对象的属性之和 需求 需要统计app端用户的行为,按天分表,存入mongo.每次用户进行操作的时候,将数据存入app本地,下次用户启动的时候,提交存入mongo,删除app本地 ...

  7. C#开发Unity游戏教程之判断语句

    C#开发Unity游戏教程之判断语句 游戏执行路径的选择——判断 玩家在游戏时,无时无刻不在通过判断做出选择.例如,正是因为玩家做出的选择不同,才导致游戏朝着不同的剧情发展,因此一个玩家可以对一个游戏 ...

  8. android 四大组件

     韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 活动,服务,广播接受者,内容提供者. 活动 能够提供 用户界面.服务 没有用户界面.广 ...

  9. BZOJ.1014.[JSOI2008]火星人(Splay 二分 Hash)

    题目链接 后缀数组显然不行啊.求LCP还可以哈希+二分,于是考虑用平衡树维护哈希值. \[某一节点的哈希值 = hs[lson]*base^{sz[rson]+1} + s[rt]*base^{sz[ ...

  10. java基础学习总结——super关键字

    一.super关键字