元素 Ref 的简单手写实现

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

1. React 的 createElement 和 render 的简单手写实现 ，里面有准备，就不再赘述了。
2. react功能组件的简单手写实现
3. 实现 react 的简单手写类组件
4. React 类组件状态更新的简单手写实现
5. React类组件状态批量更新的简单手写实现

本文的目标是手动实现元素 参考 .

TL;博士

• createRef 只是返回 {当前：空}
• 在元素上 参考 , 这指向 {当前：空} ，在解析属性时，它的 当前的 分配为元素 DOM 只是

准备

第一的 index.js 点击事件稍作修改

// 从 './source/react' 导入反应；
// 从 './source/react-dom' 导入 ReactDOM;
从“反应”导入反应；
从 'react-dom' 导入 ReactDOM；
类 Sum 扩展 React.Component {
构造函数（道具）{
超级（道具）；
这个。 a = 反应。创建参考（）；
这个。 b = 反应。创建参考（）；
这个。结果=反应。创建参考（）；
}
处理添加 = () => {
让 a = 这个。一个。当前的。价值;
让 b = 这个。湾。当前的。价值;
这个。结果。当前的。值 = a + b;
};
使成为（） {
返回 （
<>
< 输入参考 = {this.a} /> + < 输入参考 = {this.b} />
< 按钮 onClick = {this.handleAdd} > =</ button >
< 输入参考 = {this.result} />
</>
);
}
}
const reactElement = < Sum />;

反应DOM。渲染（reactElement，document.getElementById（'root'））；
复制代码

在输入框中输入1、2，点击 = 之后，参见 12：

分析参考

1. <input ref={this.a}> 其实本质是 这个.a.current 指定为 输入 真正的 DOM
2. React.createRef() 返回值始终一致 {当前：空}

完成

1.增加createRef方法

完全没有压力，直接进入 反应.js 在中，添加一个方法并返回 ``

// 反应.js
const createRef = () => ({ current: null });
常量反应 = {
创建元素，
零件，
创建参考，
};
复制代码

2.解析ref属性时，赋值当前元素DOM

这也很简单。解析 props 属性后，赋值就可以了。

功能更新道具（DOM，道具）{
// ...
if (key === 'children') 继续；
if (key === 'ref') {
// 道具是 {ref:{current:null},children:null}
安慰。 log('ref 属性赋值', props, key, props[key]);
道具[关键]。当前 = DOM；
继续;
}
}
复制代码

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

正常运行，✌️~~~

版权声明：本文为博主原创文章，遵循CC 4.0 BY-SA版权协议。转载请附上原文出处链接和本声明。

这篇文章的链接： https://homecpp.art/4521/9735/1056

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/38468/42082112