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

蔚落 2022-01-19 23:27 301阅读 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 条评论，301人围观）

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

相关阅读

相关 Milo源码解析（四）

拦截事务方法 Milo框架在执行完初始化工作之后，开始等待事务请求，并且拦截该方法，拦截的方法前面已经提到过就是带注解@MiloTCC的方法。这其中拦截方法主要是通过sp

梦里梦外;/ 2023年06月09日 13:22/ 0 赞/ 23 阅读

相关 jdk源码解析四之FutureTask

文章目录 FutureTask 构造带返回构造 run get cancel f

Dear 丶/ 2023年02月20日 12:08/ 0 赞/ 6 阅读

相关 jdk源码解析四之CountDownLatch

文章目录 CountDownLatch await countDown cancelAcquire 总结

怼烎@/ 2023年02月20日 12:08/ 0 赞/ 12 阅读

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

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

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

相关 cartographer 源码解析 (四)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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