一 代码

import React, { Component } from 'react';

class Box extends Component {
render() {
return <button>你好</button>;
}
} export default class MyComponent extends React.Component {
constructor(props) {
super(props);
this.inputRef = React.createRef(); // 将引用对象设置为父组件的成员
this.boxRef = React.createRef(); // 将引用对象设置为父组件的成员
}  render() {
return <div>
{/* ref属性设置在DOM组件上,current指向html元素 */}
<input type="text" ref={this.inputRef} />
{/* ref属性设置在普通组件上,current指向普通组件 */}
<Box ref={this.boxRef}/>
</div>
 } componentDidMount() {
console.log(this.inputRef); // {current: input}
console.log(this.inputRef.current); // <input type="text">
console.log(this.inputRef.current instanceof HTMLInputElement); // true
this.inputRef.current.focus(); // 操作子组件
console.log(this.boxRef); // {current: Box}
console.log(this.boxRef.current); // Box
console.log(this.boxRef.current instanceof React.Component); // true
}
}

二 原理

React.createRef函数会创建一个引用对象(只有一个current属性)。

// react安装包中的react.development.js
// an immutable object with a single mutable(易变的) value
function createRef() {
var refObject = {
current: null
};
{
Object.seal(refObject); // 将对象密封(不能增删属性、配置属性,但可以给属性赋值)
}
return refObject;
}

子组件创建完成后,会检测其html标签中的ref属性,并做相应的处理。

html标签中的key属性、ref属性,会被React特殊处理,不会出现在props属性中!

// react-dom安装包中的react-dom.development.js

function commitAttachRef(finishedWork) {
var ref = finishedWork.ref;
if (ref !== null) {
var instance = finishedWork.stateNode;
var instanceToUse = void 0;
switch (finishedWork.tag) {
case HostComponent: // 原生html标签
// 原样返回:function getPublicInstance(instance) {return instance;}
instanceToUse = getPublicInstance(instance);
break;
default:
instanceToUse = instance; // React组件
}
if (typeof ref === 'function') { // ref是函数
ref(instanceToUse); // 执行
} else { // ref是引用对象
{
if (!ref.hasOwnProperty('current')) {
warningWithoutStack$1(
        false,
        'Unexpected ref object provided for %s. '
          + 'Use either a ref-setter function or React.createRef().%s',
        getComponentName(finishedWork.type), getStackByFiberInDevAndProd(finishedWork));
}
} ref.current = instanceToUse; // 设置引用对象的current属性
}
}
}

引用对象是父组件的成员,于是父组件可以通过引用对象操作子组件。

React createRef:引用的更多相关文章

  1. React.createRef()

    概述: 引用(Refs)提供了一个获得DOM节点或者创建在render方法中的React元素的方法: 在典型的React数据流中,props是唯一的父组件与它们的子元素的通信方式.更改子元素,你需要使 ...

  2. React的React.createRef()/forwardRef()源码解析(三)

    1.refs三种使用用法 1.字符串 1.1 dom节点上使用 获取真实的dom节点 //使用步骤: 1. <input ref="stringRef" /> 2. t ...

  3. react之引用echarts

    react之引用echarts npm: npm install echarts --save 代码: import React, { Component } from 'react'; // 引入 ...

  4. React中引用CSS样式的方法

    相对于html中引用css的三种方法,react中也有三种方法,一一相对: 1. 行内样式:直接在组件内部定义 <div style={{width:'20px',height:'30px'}} ...

  5. react.js 引用 NavBar 报错svg-spite-loader

    Navbar   iconName="false"  配置 改为  iconName={this.props.bool}

  6. React + TypeScript:元素引用的传递

    React 中需要操作元素时,可通过 findDOMNode() 或通过 createRef() 创建对元素的引用来实现.前者官方不推荐,所以这里讨论后者及其与 TypeScript 结合时如何工作. ...

  7. React forwardRef:跳转引用

    一 在DOM组件中使用 import React, { Component } from 'react'; // 跳转引用对象本身并不关心ref,而是由渲染函数转发ref const FancyBut ...

  8. [React] Reference a node using createRef() in React 16.3

    In this lesson, we look at where we came from with refs in React. Starting with the deprecated strin ...

  9. react中的DOM操作

    前面的话 某些情况下需要在典型数据流外强制修改子代.要修改的子代可以是 React 组件实例,也可以是 DOM 元素.这时就要用到refs来操作DOM 使用场景 下面是几个适合使用 refs 的情况 ...

随机推荐

  1. 工作中 sql 整理(一)

    这篇文章记录关于SQL的内容,有些凌乱,是工作中点滴的积累,只能按照时间顺序,逐次记录. 一.update 关联更新 1.需求 Table A   TableB A表中的主键和B表中的主键相关联,关联 ...

  2. Yii2中多表关联查询(hasOne、hasMany、join、joinwith)

    表结构 现在有客户表.订单表.图书表.作者表, 客户表Customer   (id  customer_name) 订单表Order      (id  order_name  customer_id ...

  3. tomcat接口调用时延开关

    项目中有些页面时延不稳定,需要看每次接口调用时延,怎么看,有两种方法:一种是直接去catalina.out日志中看,一种是直接去localhost_access_log日志中看,第一种需要在代码中实现 ...

  4. 解压zipfile & tarfile

    def __un_zip(self, file_path): """解压.zip格式文件到同名目录下,若解压之前就存在该目录说明已解压,跳过解压过程,返回该目录" ...

  5. node压缩文件夹

    前几天遇到一个需求,将一个10G的文件夹打包压缩,并去除黑名单上的文件. node自带的只能压缩文件.网上看了集中方案要么对大文件操作不行,要么只能直接操作文件夹,无法对文件夹遍历筛选. 后来确定使用 ...

  6. TCP/IP学习20180629-数据链路层-ARP、IP

    1.数据链路层:IP.ARP.RARPARP协议用来找到目标主机的Ethernet网卡Mac地址,IP协议用来承载数据ARP协议找到目标,IP协议传输数据2.IP协议ip协议是TCP/IP协议的核心, ...

  7. problem: vue之数组元素中的数组类型值数据改变却无法在子组件视图更新问题

    问题:给父组件上的一个数组中的某个元素中的数组类型值,添加值后,数据没有在子组件上更新. 对元素添加值之后,vue的数据其实已经更新了并传给了子组件,子组件中没有立即更新. 那么这里有个问题,在子组件 ...

  8. 创建一个HTTP接口测试

    jmeter Apache JMeter是Apache组织开发的基于Java的压力测试工具. Apache jmeter 可以用于对静态的和动态的资源(文件,Servlet,Perl脚本,java 对 ...

  9. eclipse各版本及下载

    附:Eclipse各个版本简介(http://zh.wikipedia.org/wiki/Eclipse) eclipse下载地址: https://www.eclipse.org/官网--右上角的I ...

  10. 从Tomcat的处理web请求分析Java的内存模型

    Tomcat作为一个java应用,同样是有主线程和子线程的.主线使用while(true)的方式一直循环,等待客户端来连接.一个客户端来了之后,就从线程池中拿一个线程来处理请求,如果没有配置线程池,就 ...