简单手写实现类组件的Ref

简介: 简单手写实现类组件的Ref

简单手写实现类组件的Ref


继续学习写源码系列,本系列是学习系列。

  1. 简单手写实现 React 的 createElement 和 render,里面有准备工作,不再赘述。
  2. 简单手写实现 react 的函数组件
  3. 简单手写实现 react 的类组件
  4. 简单手写实现 React 类组件的 state 更新
  5. 简单手写实现 React 类组件的 state 批量更新
  6. 简单手写实现元素的 Ref

本文的目标是,手写实现类组件的Ref

TL;DR

  • createRef 仍然简单的返回{current:null}
  • 类组件身上的ref,指向的就是{current:null},解析属性的时候,其current赋值为类组件的实例

准备工作

先将index.js的点击事件略微修改

// import React from './source/react';
// import ReactDOM from './source/react-dom';
import React from 'react';
import ReactDOM from 'react-dom';
class Form extends React.Component {
  constructor(props) {
    super(props);
    this.textInputRef = React.createRef();
  }
  getFocus = () => {
    // this.textInputRef.current指的是TextInput类的实例,实例有getFocus方法
    this.textInputRef.current.getFocus();
  };
  render() {
    return (
      <>
        <TextInput ref={this.textInputRef} />
        <button onClick={this.getFocus}>获得焦点</button>
      </>
    );
  }
}
class TextInput extends React.Component {
  constructor(props) {
    super(props);
    this.input = React.createRef();
  }
  getFocus = () => {
    this.input.current.focus();
  };
  render() {
    return <input ref={this.input} />;
  }
}
ReactDOM.render(<Form />, document.getElementById('root'));

点击获得焦点,输入框获得焦点:

网络异常,图片无法展示
|

分析 ref

  1. <TextInput ref={this.textInputRef} />其实本质就是将this.textInputRef赋值为TextInput类的实例
  2. React.createRef()的返回值始终一致就是{current:null}(元素的时候说过)

实现

1.解析 ref 属性的时候,赋值当前类组件实例

这个也简单,props 属性解析的时候,赋值就好

// react-dom.js
const handleClassType = (vdom) => {
  const { type: classFn, props } = vdom;
  const instance = new classFn(props);
  // props.ref在的话,将实例赋值到ref上 {props:{ref:{current:null}}
  props.ref && (props.ref.current = instance);
  // ...
};

老规矩,index.js打开自己文件的路径

正常运行,✌️~~~

目录
相关文章
|
7月前
|
Java 数据库连接 Maven
文本,使用SpringBoot工程创建一个Mybatis-plus项目,Mybatis-plus在编写数据层接口,用extends BaseMapper<User>继承实体类
文本,使用SpringBoot工程创建一个Mybatis-plus项目,Mybatis-plus在编写数据层接口,用extends BaseMapper<User>继承实体类
|
7月前
|
文字识别 Java
文本,文字识别07,SpringBoot服务开发-入参和返回值,编写接口的时候,要注意识别的文字返回的是多行,因此必须是List集合,Bean层,及实体类的搭建
文本,文字识别07,SpringBoot服务开发-入参和返回值,编写接口的时候,要注意识别的文字返回的是多行,因此必须是List集合,Bean层,及实体类的搭建
|
7月前
|
Java Spring 容器
循环依赖问题之实例化Bean是通过如何实现的
循环依赖问题之实例化Bean是通过如何实现的
|
9月前
|
XML SQL Java
Mybatis接口Mapper内的方法为啥不能重载
Mybatis接口Mapper内的方法为啥不能重载
44 1
|
SQL Java 数据库连接
深入解析@MapperScan注解:简化MyBatis接口与映射器的关联
在Java持久化领域,MyBatis是一个广泛使用的ORM(对象关系映射)框架,用于将数据库中的数据映射到Java对象中。MyBatis的核心概念是SQL映射器(Mapper),它定义了数据库操作的方法。为了简化Mapper接口与映射器的关联,MyBatis提供了`@MapperScan`注解。本文将深入探讨`@MapperScan`注解的作用、用法,以及在MyBatis应用中的应用场景。
2320 0
|
9月前
|
XML SQL Java
Mybatis接口Mapper内的方法为啥不能重载吗
Mybatis接口Mapper内的方法为啥不能重载吗
81 0
|
9月前
|
Python
Validator 类的设计和简单实现
Validator 类的设计和简单实现
70 0
|
9月前
|
Java Spring 容器
面试题:在spring框架下面,Bean的属性lazy-init有什么作用,默认值是多少
面试题:在spring框架下面,Bean的属性lazy-init有什么作用,默认值是多少
89 0
|
Java 编译器 API
Java注释和注解的区别
Java注释和注解的区别
185 0
手写@Async注解
手写@Async注解
91 0
手写@Async注解