React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操作
- 作者:胡子大哈
- 原文链接:http://huziketang.com/books/react/lesson21
- 转载请注明出处,保留原文链接和作者信息。
在 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 内部初始化的实例。但这并不是什么常用的做法,而且也并不建议这么做,所以这里就简单提及,有兴趣的朋友可以自己学习探索。
课后练习
因为第三方评论工具有问题,对本章节有任何疑问的朋友可以移步到 React.js 小书的论坛 发帖,我会回答大家的疑问。
React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操作的更多相关文章
- 【React.js小书】动手实现 React-redux(五):Provider - 方志
我们要把 context 相关的代码从所有业务组件中清除出去,现在的代码里面还有一个地方是被污染的.那就是 src/index.js 里面的 Index: 1234567891011121314151 ...
- React.js 小书介绍
React.js 小书 Github 关于作者 这是一本关于 React.js 的小书. 因为工作中一直在使用 React.js,也一直以来想总结一下自己关于 React.js 的一些知识.经验.于是 ...
- React.js小书总结
(迁移自旧博客2017 08 27) 第一阶段 react的组件相当于MVC里面的View. react.js 将帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合.嵌套,就成 ...
- React.js 小书 Lesson25 - 实战分析:评论功能(四)
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson25 转载请注明出处,保留原文链接和作者信息. (本文未审核) 目前为止,第二阶段知识已经基本 ...
- 很赞的一个教程: React.js 小书
很赞, React.js 小书 http://huziketang.com/books/react/ 推荐阅读入门, 照着来一遍,能会个七七八八, 更多的还需要多写 import Re ...
- React.js 小书 Lesson26 - 实战分析:评论功能(五)
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson26 转载请注明出处,保留原文链接和作者信息. (本文未审核) 持久化评论 同样地,可以通过类 ...
- React.js 小书 Lesson24 - PropTypes 和组件参数验证
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson24 转载请注明出处,保留原文链接和作者信息. 我们来了到了一个非常尴尬的章节,很多初学的朋友 ...
- React.js 小书 Lesson23 - dangerouslySetHTML 和 style 属性
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson23 转载请注明出处,保留原文链接和作者信息. 这一节我们来补充两个之前没有提到的属性,但是在 ...
- React.js 小书 Lesson22 - props.children 和容器类组件
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson22 转载请注明出处,保留原文链接和作者信息. 有一类组件,充当了容器的作用,它定义了一种外层 ...
随机推荐
- mybatis mybatis.xml 文件和properties文件结合来进行配置数据源
- docker容器中安装vi
容器中输入vi提示 root@e36f8029c9f2:/# vi bash: vi: command not found 解决办法: 1.通过命令获取最新的软件包 apt-get update ap ...
- ORM之PetaPoco
近端时间从推酷app上了解到C#轻微型的ORM框架--PetaPoco.从github Dapper 开源项目可以看到PetaPoco排第四 以下是网友根据官方介绍翻译,这里贴出来. PetaPoco ...
- day04.1-三元表达式与列表解析
1. 三元表达式 name = input("请输入:") res = "英雄" if name=="令狐冲" else "伪君子 ...
- “全栈2019”Java第八章:IntelliJ IDEA设置注释不显示在行首
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- 2016级算法第四次上机-D.AlvinZH的1021实验plus
978 AlvinZH的1021实验plus 思路 贪心,中等题. 使用miss变量表示未覆盖的最小数字,初始值为1. 初始覆盖区间为[1,miss),目标是覆盖[1,m],即miss需要大于m. 需 ...
- angular5给懒加载模块添加loading
在根组件的构造函数中直接执行: this.router.events.subscribe(event=>{ if(event instanceof RouteConfigLoadEnd) { t ...
- JavaWeb学习笔记(二十二)—— 过滤器filter
一.什么是过滤器 过滤器filter是JavaWeb三大组件之一,它与Servlet很相似!不过过滤器是用来拦截请求的,而不是处理请求的.WEB开发人员通过Filter技术,对web服务器管理的所有w ...
- BZOJ 3437: 小P的牧场
传送门 显然考虑 $dp$,设 $f[i]$ 表示前 $i$ 个牧场都被控制的最小代价 那么枚举所有 $j<i$ ,$f[i]=f[j]+val[i][j]+A[i]$ $val[i][j]$ ...
- 3. Javascript学习笔记——变量、内存、作用域
3. 变量.内存.作用域 3.1 基本类型和引用类型的值 ECMAScript 变量可能包含两种不同数据类型的值:基本类型值[Undefined.Null.Boolean.Number 和 Strin ...