简单手写实现类组件的Ref
继续学习写源码系列,本系列是学习系列。
- 简单手写实现 React 的 createElement 和 render,里面有准备工作,不再赘述。
- 简单手写实现 react 的函数组件
- 简单手写实现 react 的类组件
- 简单手写实现 React 类组件的 state 更新
- 简单手写实现 React 类组件的 state 批量更新
- 简单手写实现元素的 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
<TextInput ref={this.textInputRef} />
其实本质就是将this.textInputRef
赋值为TextInput
类的实例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
打开自己文件的路径
正常运行,✌️~~~