[Web 前端] React高级教程(es6)——(2)对于Refs最新变动的理解
2023-09-14 08:56:59 时间
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阶段取元素,语法如下:
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。
相关文章
- 【笔记】ES6 模板字符串
- es6 模板字符串_json字符串转成标准格式输出
- 关于ES6-聊聊你可能不知道的事
- ES6总结
- ES6的基础语法
- es6 数组的空位
- ES6--模板字符串
- 每天3分钟,重学ES6-ES12(十)Promise参数实例方法介绍
- 一文搞清楚ES6新增数据结构 Symbol Map WeakMap Set WeakSet
- es6中的Let和Const详解(文末有教程分享)
- ES6的Map用法详解
- ES6 学习笔记(六)基本类型String
- 2022 年 JavaScript 从 ES6 到 ES12 新特性汇总
- ES6:模块化的基本语法
- ES6 箭头函数一些基本使用方法
- 深入浅出ES6的迭代器
- ES6中的Iterator 和for of循环
- ES6 javascript 实用开发技巧详解编程语言
- 尾调用、优化和 ES6