学习React系列(三)——Refs和Dom
一、适用于以下场景:
1、控制焦点,文本选择,或者媒体控制
2、触发必要的动画
3、整合第三方dom库
二、不要过度使用ref
如果想通过ref来改变state,那么换一种方式-变量提升可能会更好。
三、ref可以添加在dom中
ref接收一个回掉函数,该函数的传入参数为底层的dom元素,该回掉方法会在组件挂载后和移除后立即执行,
React 组件在加载时将 DOM 元素传入 ref
的回调函数,在卸载时则会传入 null
。ref
回调会在componentDidMount
或 componentDidUpdate
这些生命周期回调之前执行。
class CustomTextInput extends React.Component {
constructor(props) {
super(props);
this.focus = this.focus.bind(this);
} focus() {
// 直接使用原生 API 使 text 输入框获得焦点
this.textInput.focus();
} render() {
// 使用 `ref` 的回调将 text 输入框的 DOM 节点存储到 React
// 实例上(比如 this.textInput)
return (
<div>
<input
type="text"
ref={(input) => { this.textInput = input; }} />
<input
type="button"
value="Focus the text input"
onClick={this.focus}
/>
</div>
);
}
}
四、ref添加在组件实例中
当 ref
属性用于使用 class 声明的自定义组件时,ref
的回调接收的是已经加载的 React 实例
class AutoFocusTextInput extends React.Component {
componentDidMount() {
//所以此时相当于调用了CustomTextInput的focusTextInput()方法
this.textInput.focusTextInput();
} render() {
return (
<CustomTextInput
//在这里定义this.textInput的值为input即为CustomTextInput组件的实例
ref={(input) => { this.textInput = input; }} />
);
}
}
五、对父组件暴漏dom节点
function CustomTextInput(props) {
return (
<div>
<input ref={props.inputRef} />
</div>
);
} function Parent(props) {
return (
<div>
My input: <CustomTextInput inputRef={props.inputRef} />
</div>
);
} class Grandparent extends React.Component {
render() {
return (
<Parent
inputRef={el => this.inputElement = el}
/>
);
}
}
可以通过中间属性来传递回掉函数,进而访问子组件中的dom
参考:https://doc.react-china.org/docs/refs-and-the-dom.html
https://reactjs.org/docs/refs-and-the-dom.html
学习React系列(三)——Refs和Dom的更多相关文章
- 从0开始学习react(三)
这次我们来讲解第三节知识,考虑了下,先不去讲什么理论了,毕竟网上一搜一大堆,而且理论真心看不太懂啊!!! 今天我们就直接上实例喽! 大家HIGH起来!!!(想了好久,还是没舍得删这句话) 1.根据下图 ...
- 为什么学习React Native三点原因
React Native不到两岁,兼容Android平台刚刚1年.我学习React Native其实也就不到1年,不算长,也不算短. Paul Graham在文章中写过:大多数人真正注意到你的时候,不 ...
- 正式学习 React(三)番外篇 reactjs性能优化之shouldComponentUpdate
性能优化 每当开发者选择将React用在真实项目中时都会先问一个问题:使用react是否会让项目速度更快,更灵活,更容易维护.此外每次状态数据发生改变时都会进行重新渲染界面的处理做法会不会造成性能瓶颈 ...
- 学习React系列(六)——更新dom细节于原理
React更新dom的依据: 1.不同类型的elements会产生不同的树 2.通过render方法中包含key属性的子元素,开发者可以示意哪些子元素可能是稳定的. 更新过程: 一.根元素类型不同:旧 ...
- 学习React系列(九)——高阶函数
定义:高阶组件就是一个函数,且该函数接收一个组件作为参数,并返回一个新的组件. (上一篇已经说过了高阶组件可以用来解决交叉问题) 一.不要改变原始组件,使用组合 class A extends Rea ...
- 学习React系列(七)——Fragments、Portals、Error Boundaries与WEB组件
React.Fragment portals Error Boundaries WEB组件 React.Fragment 想象一个场景,想把td包装为组件添加到table中去,代码如下: class ...
- 学习react系列(八)—— mixins迁移
先来介绍一下mixins(混入) 先来看一段代码: const mixin = function(obj, mixins) { const newObj = obj; newObj.prototype ...
- 学习React系列(五)——使性能最优
提高性能可分为两方面: 一.配置层面 二.代码层面 本文只从代码层面考虑: 一.避免重复渲染 这里要说一句: 当shouldComponentUpdate返回false的时候不触发render函数也就 ...
- 学习React系列(四)——受控组件与非受控组件
受控组件:通过组件的状态与属性的改变来控制组件 不可控组件:直接通过底层的dom来控制组件(具体来说就是通过绑定再底层dom上的方法来实现的,比如说ref,onChange) 受控组件 functio ...
随机推荐
- window.print()打印页面指定内容(使用iframe保证原页面不失效)
使用window.print()时会出现两个问题: (1)直接使用window.print() 打印的是整页内容-->无法实现打印指定区域 (2)打印时替换body中的内容,打印完成后再替换回来 ...
- mysql数据库索引优化与实践(一)
前言 mysql数据库是现在应用最广泛的数据库系统.与数据库打交道是每个Java程序员日常工作之一,索引优化是必备的技能之一. 为什么要了解索引 真实案例 案例一:大学有段时间学习爬虫,爬取了知乎30 ...
- [转]C++ 初始化列表的初始化顺序
构造函数初始化列表仅用于初始化成员的值,并不指定这些初始化执行的次序.成员被初始化的次序就是定义成员的次序.第一个被定义的成员先被初始化,依次类推.一般,初始化的顺序无关紧要,然而,如果一个成员是根据 ...
- java1.8版本的HashMap源码剖析
一.摘要 以下分析内容均是基于JDK1.8产生的,同时也和JDK1.7版本的hashmap做了一些比较.在1.7版本中,HashMap的实现是基于数组+链表的形式,而在1.8版本中则引入了红黑树,但其 ...
- Java基础学习笔记十九 IO
File IO概述 回想之前写过的程序,数据都是在内存中,一旦程序运行结束,这些数据都没有了,等下次再想使用这些数据,可是已经没有了.那怎么办呢?能不能把运算完的数据都保存下来,下次程序启动的时候,再 ...
- 2018上C语言程序设计(高级)博客作业样例
要求一(20分) 完成PTA中题目集名为<usth-C语言高级-第1次作业>中的所有题目. 要求二 PTA作业的总结(20分+30分) 将PTA第1次作业作业中以下2道题的解题思路按照规定 ...
- 201621123062《java程序设计》第二周学习总结
1.本周学习总结 本周学习重点: 1.java的基本数据类型(类似于C,特有boolean),java的引用类型(类似指针),其他常用类. 2.字符串类型String(比c简单),String的不变性 ...
- 201621123040《Java程序设计》第2周学习总结
1.本周学习总结 关键词:Java中的字符串与数组 c语言基本语法的迁移 相关总结:在一周的学习过程中,我自主学习Java的基本语法,前期的相关语法与c语言的基本语法相近,也算是做到了很好的回顾:在郑 ...
- 团队开发---”我爱淘“校园二手书店 NABC分析
本项目特点之一:可预订 N:对于一些抢手的书可以提前预定,避免学生买不到书 A:网上下单,通过手机便捷购物 B:使得订书更加方便快捷 C:二手书摊.网上书店 团队成员:杨广鑫.郭健豪.李明.郑涛
- NetFPGA-1G-CML从零开始环境配置
NetFPGA-1G-CML从零开始环境配置 前言 偶得一块NetFPGA-1G-CML,跟着github对NetFPGA-1G-CML的入门指南,一步步把配置环境终于搭建起来,下面重新复现一下此过程 ...