React16源码: React中处理ref的核心流程源码实现

原创

已于 2024-01-31 23:29:24 修改 · 1.6k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #前端框架

于 2024-01-31 19:00:00 首次发布

ref的实现过程

1 ）概述

在更新流程当中如何去设置ref上面的对象的过程
在我们创建fiber的时候去处理ref这个属性
那我们什么时候创建fiber对象?
- 就是我们去更新某一个节点，然后要去调和它的子节点的时候
- 这个时候我们会对每一个子节点去创建这个fiber对象
创建这个fiber对象的过程，我们就会去处理这个ref
commit开始之前先detach

2 ）源码

定位到 packages/react-reconciler/src/ReactChildFiber.js#L1108

function reconcileSingleElement(
  returnFiber: Fiber,
  currentFirstChild: Fiber | null,
  element: ReactElement,
  expirationTime: ExpirationTime,
): Fiber {
   
   
  // ... 跳过很多代码
  while (child !== null) {
   
   
    // TODO: If key === null and child.key === null, then this only applies to
    // the first item in the list.
    if (child.key === key) {
   
   
      if (
        child.tag === Fragment
          ? element.type === REACT_FRAGMENT_TYPE
          : child.elementType === element.type
      ) {
   
   
        // ... 跳过很多代码

        // 注意这里
        existing.ref = coerceRef(returnFiber, child, element);
        
        // ... 跳过很多代码
      } else {
   
   
        deleteRemainingChildren(returnFiber, child);
        break;
      }
    } else {
   
   
      deleteChild(returnFiber, child);
    }
    child = child.sibling;
  }
  
  if (element.type === REACT_FRAGMENT_TYPE) {
   
   
    // ... 跳过很多代码
    return created;
  } else {
   
   
    // ... 跳过很多代码
    // 注意这里
    created.ref = coerceRef(returnFiber, currentFirstChild, element);
    created.return = returnFiber;
    return created;
  }
}

进入 coerceRef

function coerceRef(
  returnFiber: Fiber,
  current: Fiber | null,
  element: ReactElement,
) {
     
     
  let mixedRef = element.ref; // 拿到 ref
  // function ref 和 object ref 是不需要经过特殊处理的
  // 自己处理节点对象挂载到 class component 的 this 上面这一个过程
  // 对于 string ref，它只是一个string，它没有任何功能，它的挂载是要react这边来帮着去做的
  // 所以这边主要去 去处理一下 string ref 的一个实现过程
  if (
    mixedRef