元素 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