ref 和 React.js 中的 DOM 操作
在 React.js 当中你基本不需要和 DOM 直接打交道。React.js 提供了一系列的 on*
方法帮助我们进行事件监听,所以 React.js 当中不需要直接调用 addEventListener
的 DOM API;以前我们通过手动 DOM 操作进行页面更新(例如借助 jQuery),而在 React.js 当中可以直接通过 setState
的方式重新渲染组件,渲染的时候可以把新的 props
传递给子组件,从而达到页面更新的效果。
React.js 这种重新渲染的机制帮助我们免除了绝大部分的 DOM 更新操作,也让类似于 jQuery 这种以封装 DOM 操作为主的第三方的库从我们的开发工具链中删除。
但是 React.js 并不能完全满足所有 DOM 操作需求,有些时候我们还是需要和 DOM 打交道。比如说你想进入页面以后自动 focus 到某个输入框,你需要调用 input.focus()
的 DOM API,比如说你想动态获取某个 DOM 元素的尺寸来做后续的动画,等等。
React.js 当中提供了 ref
属性来帮助我们获取已经挂载的元素的 DOM 节点,你可以给某个 JSX 元素加上 ref
属性:
class AutoFocusInput extends Component {
componentDidMount () {
this.input.focus()
} render () {
return (
<input ref={(input) => this.input = input} />
)
}
} ReactDOM.render(
<AutoFocusInput />,
document.getElementById('root')
)
可以看到我们给 input
元素加了一个 ref
属性,这个属性值是一个函数。当 input
元素在页面上挂载完成以后,React.js 就会调用这个函数,并且把这个挂载以后的 DOM 节点传给这个函数。在函数中我们把这个 DOM 元素设置为组件实例的一个属性,这样以后我们就可以通过 this.input
获取到这个 DOM 元素。
然后我们就可以在 componentDidMount
中使用这个 DOM 元素,并且调用 this.input.focus()
的 DOM API。整体就达到了页面加载完成就自动 focus 到输入框的功能(大家可以注意到我们用上了 componentDidMount
这个组件生命周期)。
我们可以给任意代表 HTML 元素标签加上 ref
从而获取到它 DOM 元素然后调用 DOM API。但是记住一个原则:能不用 ref
就不用。特别是要避免用 ref
来做 React.js 本来就可以帮助你做到的页面自动更新的操作和事件监听。多余的 DOM 操作其实是代码里面的“噪音”,不利于我们理解和维护。
顺带一提的是,其实可以给组件标签也加上 ref
,例如:
<Clock ref={(clock) => this.clock = clock} />
这样你获取到的是这个 Clock
组件在 React.js 内部初始化的实例。但这并不是什么常用的做法,而且也并不建议这么做,所以这里就简单提及,有兴趣的朋友可以自己学习探索。
ref 和 React.js 中的 DOM 操作的更多相关文章
- React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操作
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson21 转载请注明出处,保留原文链接和作者信息. 在 React.js 当中你基本不需要和 DO ...
- js中的DOM操作汇总
一.DOM创建 DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性.DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: Element,元素 Attrib ...
- JS中的DOM操作和事件
[DOM树节点] DOM节点分为三大类: 元素节点. 属性节点. 文本节点: 文本节点.属性节点属于元素节点的子节点.操作时,均需要先取到元素节点,再操作子节点:可以使用getElement系列方法, ...
- JS中的DOM操作怎样添加、移除、移动、复制、创建和查找节点
DOM操作怎样添加.移除.移动.复制.创建和查找节点? (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元 ...
- js中的DOM操作(2)
1.表格的更加与删除 <!DOCTYPE html> <html> <head> <title>表格操作</title> <style ...
- js中的DOM操作(1)
一.操作子节点 childNodes 通过该方式可以获取父节点下的所有子节点,但是由于浏览器的差异,这写节点中可能包含文本节点. <!DOCTYPE html> <html> ...
- 从源码的角度再看 React JS 中的 setState
在这一篇文章中,我们从源码的角度再次理解下 setState 的更新机制,供深入研究学习之用. 在上一篇手记「深入理解 React JS 中的 setState」中,我们简单地理解了 React 中 ...
- 【Java EE 学习 32 下】【JQuery】【JQuey中的DOM操作】
一.JQuery中的DOM操作. 什么是DOM:DOM是一中和浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DOM简称文档对象模型,是Document Oject Mode ...
- dom core,html dom,css dom,jquery 中的dom操作
前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...
随机推荐
- redis12-----redis 与关系型数据库的对比
书和书签系统 create table book ( bookid int, title ) )engine myisam charset utf8; insert into book values ...
- linux命令启动服务(tomcat服务或者jar包)
启动tomcat: 1.方式一:直接启动 ./startup.sh 2.方式二:nohup ./startup.sh & 启动后,关闭当前客户端连接,重新启动一个查看是 否已经启动 启动jar ...
- usaco2008 nov 区间异或求和
Problem 11: Switching Lights [LongFan, 2008] Farmer John tries to keep the cows sharp by letting the ...
- java基础知识一
1.计算机基础知识概述 (1) 计算机 计算机(computer)俗称电脑,是一种用于高速计算的电子计算机器,可以进行数值计算,又可以进行逻辑计算,还具有存储记忆功能.是能够按照程序运行,自动.高速处 ...
- MYSQL进阶学习笔记二:MySQL存储过程和局部变量!(视频序号:进阶_4-6)
知识点三:MySQL存储过程和局部变量(4,5,6) 存储过程的创建: 创建存储过程的步骤: 首先选中数据库 改变分隔符,不让分号作为执行结束的标记.(通常情况下,改变分隔符命令 DELIMI ...
- dict built-in function
映射类型:字典 字典是无序的,映射类型对象里哈希值和被指向的对象是一对多的关系,字典中的键必须是可哈希的,所有不可变的类型都是可哈希的,另外针对数字键来说,值相等的两个数字是相同的键,例如1和1.0: ...
- CodeForces985F:Isomorphic Strings (字符串&hash)
题意:取出字符串Str里的两个串S,T,问对应位置的的字符在否有一一映射关系. hash:对于每个字符s=‘a’-‘z’,我们任意找一个i,满足Si==s,(代码里用lower_bound在区间找到最 ...
- JAVA泛型与可变参数
泛型的引入: 早期的Object类型可以接收任意的对象类型,但是在实际的使用中,会有类型转换的问题.也就存在这隐患,所以Java提供了泛型来解决这个安全问题. 格式: 泛型类:public class ...
- AutoIt获取Gridview中可以修改列的值
有一个界面如上图:黑色框框部分是一个整体,也是一个gridview,如果我想把框框中右侧数据获取出来,该如何操作? 我尝试过了很多途径,都无法成功. 今天,我发现,当鼠标焦点在黑色框框左侧的部分的时候 ...
- robotframework之APP混合H5自动化测试
app中有webview的情况 手机淘宝的天猫国际页面是一个webview robotframework代码: *** Settings *** Suite Setup Suite Teardown ...