React源码解析(四)：react-ref

蔚落 2022-01-19 23:27 258阅读 0赞

平时我们可能会有这样的需求，就是需要获取某个dom节点或者子组件的实例来更新，而并不是只是通过props等来更新dom节点或者组件。如果没有一个好的方法我们可能自己去获取节点(例：querySelector等)或者去绑定事件来进行一些操作，而且自己还要去管理获取的一些相关的东西，这样可能会不方便。那么，在react当中就为我们提供了这样的方式，通过ref去获取子节点的一个实例。

在react当中有三种使用ref的方式：

*  string ref(即将废弃)
 *  function(ref=\{node=> this.refs = node\})
 *  createRef(推荐使用)

看下createRef源码：

import type {RefObject} from 'shared/ReactTypes';
    
    // an immutable object with a single mutable valueexport 
    function createRef(): RefObject {  
        const refObject = {    
            current: null,  
        };  
    
        if (__DEV__) {    
            Object.seal(refObject);  
        }  
    
        return refObject;
    }复制代码

只有这么短短的几行代码, 看下官方的使用实例:

class MyComponent extends React.Component {
      constructor(props) {
        super(props);
    
        this.inputRef = React.createRef();
      }
    
      render() {
        return <input type="text" ref={this.inputRef} />;
      }
    
      componentDidMount() {
        this.inputRef.current.focus();
      }
    }复制代码

调用React.createRef()，会把节点的实例挂载到current属性上供我们去使用。

发表评论取消回复

表情：

评论列表（有 0 条评论，258人围观）

还没有评论，来说两句吧...

相关阅读

相关 React17源码深入解析+React18源码初探，进阶必备

6月份，React 发布了v18 的Alpha 版本。 ![cb3812550d648a34dfa1924d3ea17c5f.png][] 引起了前端圈的一片哀嚎：肝不

雨点打透心脏的1/2处/ 2022年09月02日 11:40/ 0 赞/ 165 阅读

相关 cartographer 源码解析 (四)

相关链接： [cartographer 源码解析(一)][cartographer] [cartographer 源码解析(二)][cartographer 1]

女爷i/ 2022年09月01日 09:27/ 0 赞/ 180 阅读

相关 React17源码深入解析+React18源码初探，进阶必备

6月份，React 发布了v18 的Alpha 版本。 ![1c788dd74756d92f12c429898c03a5a7.png][] 引起了前端圈的一片哀嚎：肝不

拼搏现实的明天。/ 2022年08月29日 10:14/ 0 赞/ 182 阅读

相关 Spring源码解析--Spring配置文件解析BeanDefinitionParserDelegate（四）

上一篇博客[Spring源码学习--Spring配置文件解析BeanDefinitionDocumentReader（三）][Spring_--Spring_Be

桃扇骨/ 2022年06月14日 01:51/ 0 赞/ 171 阅读

相关 libevent源码解析（四）evbuffer结构

一.前言在前文中，我们分析了libevent库最基本的事件：event的数据结构及相关接口函数，并分析了event背后（backend）的事件库/事件管理核心eve

ゝ一纸荒年。/ 2022年05月21日 00:05/ 0 赞/ 187 阅读

相关 redis源码解析（四）双向链表

本文分析redis里的双向链表的基础结构以及基础函数 1. 基本结构 redis的双向链表主要实现了以下三个结构体：（1）链表节点，包括两个指针指向前

你的名字/ 2022年05月15日 14:38/ 0 赞/ 145 阅读

相关 dubbo源码解析-spi(四)

Dubbo源码解析系列文章均来自肥朝简书前言本篇是`spi`的第四篇,本篇讲解的是`spi`中增加的`AOP`,还是和上一篇一样,我们先从大家熟悉的spring引出

比眉伴天荒/ 2022年04月24日 18:10/ 0 赞/ 254 阅读

相关 MyBatis源码解析（四）：初始化Mapper

前沿：在[MyBatis源码解析（三）：初始化SqlSession][MyBatis_SqlSession]博客中，已经对 openSession() 底层进行

女爷i/ 2022年02月26日 14:22/ 0 赞/ 357 阅读

相关 React源码解析(四)：react-ref

平时我们可能会有这样的需求，就是需要获取某个dom节点或者子组件的实例来更新，而并不是只是通过props等来更新dom节点或者组件。如果没有一个好的方法我们可能自己去获取节点(

蔚落/ 2022年01月19日 23:27/ 0 赞/ 259 阅读

相关 ffmpeg 中 rtsp相关源码解析(四)

最近在搞 ffmpeg RTP 向RTMP的转换，所以顺便把ffmpeg相关的源码看了一下没在rtpdec.c中找到找到 rtp demuxer的定义，却在rtsp.c中找

柔光的暖阳◎/ 2021年06月24日 13:58/ 0 赞/ 710 阅读