实现useRef

需要完成的工作： 实现Ref 数据结构 实现Ref 工作流程

Ref数据结构

Ref 存在3种数据结构：

string
(instance: T) => void
<div ref={dom => console.log(dom)}></div>
{current: T}
<div ref={domRef}></div>

HostComponent Ref工作流程

1. 标记Ref

标记Ref 需要满足： mount 时：存在refupdate 时：ref 引用变化 标记的时机包括：

beginWork
completeWork

2. 执行Ref 操作

包括两类操作：

1. 对于正常的绑定操作： 解绑之前的ref （mutation 阶段） 绑定新的ref （layout 阶段）
2. 对于组件卸载： 解绑之前的ref 卡颂课堂 进店逛逛 包含该课程的还有 从0实现React18 已更新 63 期 Copyright © 2019-2023 卡颂 All Rights Reserved.