React高级教程(es6)——(2)对于Refs最新变动的理解
2016-11-28 20:48
513 查看
1.什么是ReactJS中的refs
在React中组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual
DOM)。只有当它插入文档以后,才会变成真实的 DOM 。根据 React 的设计,所有的 DOM 变动,都先
在虚拟 DOM 上发生,然后再将实际发生变动的部分,反映在真实 DOM上,这种算法叫做 DOM diff ,它
可以极大提高网页的性能表现。
如果我们想在虚拟DOM时(此时DOM还没有转化为真是DOM),取到某一个元素,此时不能通过
JS的getElementByXXX这种形式。
2.ReactJS前期的做法
前期在虚拟DOM阶段取元素,语法如下:
从上述我们可以知道可以通过refs.[refsName]来取得虚拟DOM中的元素。
3.ReactJS最新版本,对于refs的定义
关于refs的定义在最新版本中,并没有变化,但是使用语法有了很大的改变。
现在组件中的refs是一个回调函数。
这个函数,在组件生成期(mounted)
会自动执行,这个回调函数的参数是元素本身:
在这个例子中,ref的函数,传入了input元素本身,并且将this.myinput赋值为input元素本身。
在元素的销毁期(unmounted)也会执行,但是在销毁期,无论如何只会返回null。
在React中组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual
DOM)。只有当它插入文档以后,才会变成真实的 DOM 。根据 React 的设计,所有的 DOM 变动,都先
在虚拟 DOM 上发生,然后再将实际发生变动的部分,反映在真实 DOM上,这种算法叫做 DOM diff ,它
可以极大提高网页的性能表现。
如果我们想在虚拟DOM时(此时DOM还没有转化为真是DOM),取到某一个元素,此时不能通过
JS的getElementByXXX这种形式。
2.ReactJS前期的做法
前期在虚拟DOM阶段取元素,语法如下:
function Hello(){ handleClick:function(){ this.refs.myinput.fucus(); } return <input ref="myinput" /> }
从上述我们可以知道可以通过refs.[refsName]来取得虚拟DOM中的元素。
3.ReactJS最新版本,对于refs的定义
关于refs的定义在最新版本中,并没有变化,但是使用语法有了很大的改变。
现在组件中的refs是一个回调函数。
这个函数,在组件生成期(mounted)
会自动执行,这个回调函数的参数是元素本身:
function Hello(){ handleClick:function(){ } return <input ref={(input)=>{this.myinput=input;}}/> }
在这个例子中,ref的函数,传入了input元素本身,并且将this.myinput赋值为input元素本身。
在元素的销毁期(unmounted)也会执行,但是在销毁期,无论如何只会返回null。
相关文章推荐
- React高级教程(es6)——(1)JSX语法深入理解
- React高级教程(es6)——(4)ShouldComponentUpdate的用法
- React高级教程(es6)——(3)React中的Context
- 最新的React服务器端渲染入门教程
- 大前端全套完整教程106G 爱前端-邵山欢课程 node+angular+vue+react+webapp 高级部分
- react学习之 todolist制作, es6最新写法
- React高级教程React中的Context
- react的es6最新中表单详解,input select下值的获取
- MySQL中对于NULL值的理解和使用教程
- 对于ES6新数据类型Symbol()的理解和学习
- 2017最新java高级架构师视频教程互联网高并发分布式大数据开发
- 【备忘】2017年最新React开发Native开发安卓与ios平台的GitHub App视频教程
- 最新的react0.14支持ES6开发环境配置方案
- android ReactNative混合开发之最新教程
- 深入理解正则表达式高级教程
- 深入理解React中es6创建组件this的方法
- enum以及位域运算符的高级用法(详解-最易理解位域运算的教程)
- js高级教程第3版笔记(我的理解)陆续更新中
- 深入理解正则表达式高级教程
- React高级指南(三)【Refs and the DOM】