【React Hooks原理 - forwardRef、useImperativeHandle】

宇豪学习录

已于 2024-07-25 18:21:36 修改

阅读量1.3k

点赞数 12

分类专栏： React Hooks原理文章标签： react.js javascript 前端

于 2024-07-16 16:17:50 首次发布

本文链接：https://blog.csdn.net/weixin_44273311/article/details/140434639

版权

React Hooks原理专栏收录该内容

10 篇文章 1 订阅

订阅专栏

概述

上文我们聊了useRef的使用和实现，主要两个用途：1、用于持久化保存 2、用于绑定dom。但是有时候我们需要在父组件中访问子组件的dom或者属性/方法，而React中默认是不允许父组件直接访问子组件的dom的，这时候就可以通过forwardRef将ref传入子组件，并暴露子组件的dom给父组件使用，但是这种方式直接暴露了子组件的dom，处于安全性能考虑，我们希望子组件只暴露我们所希望的属性，由子组件自己决定暴露什么，这个就需要使用到useImperativeHandle来处理。基于这些使用场景，所以本文主要从基本使用和源码实现两方面来介绍下forwardRef、useImperativeHandle这两个API。

基本使用

本小节主要介绍这两个API在Function Component中的使用，已经熟悉APi的同学可以跳过该部分，直接查看源码解析部分。

forwardRef

forwardRef主要解决的是从父组件传递ref到子组件的问题，定义如下：

const SomeComponent = forwardRef(render)

render：组件的渲染函数。React 会调用该函数并传入父组件传递的 props 和 ref。返回的 JSX 将作为组件的输出。
返回一个可以在 JSX 中渲染的 React 组件。与作为纯函数定义的 React 组件不同，forwardRef 返回的组件还能够接收 ref 属性。

forwardRef接收一个渲染函数，然后返回一个可在JSX中渲染的组件。一般用于包裹子组件，用于ref传递，将子组件绑定的ref通过第二个参数传入，并绑定到子组件dom节点暴露。可以这样理解forwardRef 是一个接收render函数作为参数的高阶函数

如下demo在子组件中暴露了input组件，使父组件可以访问并进行例如获取焦点等dom操作

const MyInput = forwardRef(function MyInput(props, ref) {
  return (
    <label>
      {props.label}
      <input ref={ref} />
    </label>
  );
});

进过forwardRef包裹之后，父组件就可以通过ref来访问子组件中暴露的dom节点，但是有时候我们希望自己控制暴露哪些属性，尤其是当作为公共组件被多方调用的时候，这时候就需要通过useImperativeHandle来实现自定义暴露属性

forwardRef并不是一个Hook，这里主要是作为介绍useImperativeHandle的媒介，通常是将这两个Api连用，所以这里一起简单介绍下。所有的Hook都是用use开头命名的

useImperativeHandle

useImperativeHandle 是 React 中的一个 Hook，它能让你自定义由 ref 暴露出来的句柄。

useImperativeHandle(ref, createHandle, dependencies?)

ref：该 ref 是你从 forwardRef 渲染函数中获得的第二个参数。
createHandle：该函数无需参数，它返回你想要暴露的 ref 的句柄。该句柄可以包含任何类型。通常，你会返回一个包含你想暴露的方法的对象。
dependencies：可选参数，作为函数 createHandle的依赖收集。React 会使用 Object.is 来比较每一个依赖项与其对应的之前值。如果该数组值发生改变或者数组为空数组，则会重新执行createHandle并将新的对象绑定到ref。

一般是将forwardRef和useImperativeHandle一起用，通过useImperativeHandle暴露指定属性，然后父组件可以通过forwardRef注入的ref来进行访问。举例来说，假设你不想暴露出整个 DOM 节点，但你想要它其中两个方法：focus 和 scrollIntoView。为此，用单独额外的 ref 来指向真实的浏览器 DOM。然后使用 useImperativeHandle 来暴露一个句柄，它只返回你想要父组件去调用的方法：

import { forwardRef, useRef, useImperativeHandle } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  const inputRef = useRef(null);

  useImperativeHandle(ref, () => {
    return {
      focus() {
        inputRef.current.focus();
      },
      scrollIntoView() {
        inputRef.current.scrollIntoView();
      },
    };
  }, []);

  return <input {...props} ref={inputRef} />;
});

在上述代码中，该 ref 已不再被转发到<input>中，而是传入到了useImperativeHandle，可以理解为useImperativeHandle将ref进行了劫持并将暴露的属性绑定到ref.current上。而且我们也可以自定义返回的数据，比如正常在父组件是通过ref.current访问，这个可以自定义为ref.xxx

import { forwardRef, useRef, useImperativeHandle } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  const inputRef = useRef(null);

  useImperativeHandle((createResult) => {
  	ref['xxx'] = createResult;
	return ref
	}, () => {
    return {
      focus() {
        inputRef.current.focus();
      },
      scrollIntoView() {
        inputRef.current.scrollIntoView();
      },
    };
  }, []);

  return <input {...props} ref={inputRef} />;
});

这是由于在源码实现中对于传递对象类型和函数类型的ref处理是不一样的，详情可以查看下面源码解析。

源码解析

上面我们介绍了这两个API的基本语法和使用场景，下面我们将从源码的角度，一步一步分析其内部是如何实现的。

主要涉及文件如下：

代码入口文件路径：https://github.com/facebook/react/blob/main/packages/react/src/ReactHooks.js
执行代码文件路径: https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberHooks.js
forwardRef文件路径: https://github.com/facebook/react/blob/main/packages/react/src/ReactForwardRef.js
beginWork函数路径: https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberBeginWork.js

下面的都是基于生产环境下的代码分析，以及会省略与本次解释无关的代码，完整代码可以根据以上路径前往官网github查看。

forwardRef

从代码中能看出，在生产环境下，调用forwardRef包裹render函数之后，会将该render函数打上标签$$typeof用于React区分当前组件是什么类型并进行不同的处理。

$$typeof: 这个属性是一个符号常量，用来标识这是一个 forwardRef 组件类型。在 React 内部，这个符号被用来区分不同类型的 React 元素，例如函数组件、类组件、片段（fragment）等。REACT_FORWARD_REF_TYPE 的值是一个独特的符号，确保了它在 React 内部可以被正确识别。

export function forwardRef<Props, ElementType: React$ElementType>(
  render: (props: Props, ref: React$Ref<ElementType>) => React$Node
) {
  const elementType = {
    $$typeof: REACT_FORWARD_REF_TYPE,
    render,
  };

  return elementType;
}

当完成标记之后，后续会进入到Recondiler协调器中进行fiber构造，其中会经历beginWork阶段对JSX代码进行处理并生成Fiber节点。在这个阶段会根据tag来对不同组件进行处理，这里就是ForwardRef类型

function beginWork(current, workInProgress, renderLanes) {
  // ...
  switch (workInProgress.tag) {
    // ...
    case ForwardRef:
      const type = workInProgress.type;
      const unresolvedProps = workInProgress.pendingProps;
      const resolvedProps =
        disableDefaultPropsExceptForClasses ||
        workInProgress.elementType === type
          ? unresolvedProps
          : resolveDefaultPropsOnNonClassComponent(type, unresolvedProps);
      return updateForwardRef(
        current, // 当前页面显示的fiber树
        workInProgress, // 内存中构建的fiber树
        type, // fiber类型，即ForwardRef返回的elementType
        resolvedProps, // 传递给组件的属性集合
        renderLanes // 优先级
      );
    // ...
  }
}

参数介绍如下：

current: 当前页面显示的旧的fiber节点
workInProgress: 内存中构建的新的fiber节点
type: fiber类型，即通过ForwardRef创建的elementType对象，包含$$typeof、render
resolvedProps: 传递给组件的属性集合
renderLanes: 渲染优先级

调用renderWithHooks处理 hooks 逻辑，并调用实际的 render 函数，传递 nextProps 和 ref

function updateForwardRef(current, workInProgress, Component, nextProps, renderLanes) {
  const render = Component.render; // 获取 render 函数
  const ref = workInProgress.ref;  // 获取 ref

  let nextChildren;
  // 调用 renderWithHooks 处理 hooks 逻辑并调用 render 函数
  nextChildren = renderWithHooks(current, workInProgress, render, nextProps, ref, renderLanes);

  workInProgress.flags |= PerformedWork;
  // 调用 reconcileChildren 处理子节点协调
  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
  return workInProgress.child;
}

function renderWithHooks(current, workInProgress, Component, props, secondArg, nextRenderLanes) {
  // ...
  const children = Component(props, secondArg);
  // ...
  return children;
}

从以上代码能看出，forWardRef原理就是：给传递的render函数打上ForWardRef($$typeof)的标签，让React知道当前组件的类型，然后在beginWork阶段会根据这个类型处理，将render和ref解析处理之后将ref作为render的第二个参数传入即const children = Component(props, secondArg);

useImperativeHandle

该Hook提供了子组件自定义暴露的属性方法的能力，同其他Hook一样，本文也从首次渲染、更新渲染两个方便来说明其实现。

由于本文分成了Mount、Update两个部分介绍，所以这里简单介绍下两者区别：

Mount 阶段：在组件的初始挂载（第一次渲染）阶段。主要负责初始化 Hook 的状态和队列，并建立 Hook 之间的链式关系。
Update 阶段：组件在其 props 或 state 改变后被重新渲染。主要负责处理状态更新，将新的状态应用到 memoizedState 中，以便下一次渲染使用，并更新 Hook 链表(复用/克隆现有Hook)及其更新队列updateQueue。

mount首次渲染

虽然我们在使用时只是useImperativeHandle函数，但是在React内部通过dispatcher进行了派发，在mount阶段执行的mountImperativeHandle函数

function mountImperativeHandle<T>(
  ref: { current: T | null } | ((inst: T | null) => mixed) | null | void,
  create: () => T,
  deps: Array<mixed> | void | null
): void {
  // TODO: If deps are provided, should we skip comparing the ref itself?
  const effectDeps =
    deps !== null && deps !== undefined ? deps.concat([ref]) : null;

  let fiberFlags: Flags = UpdateEffect | LayoutStaticEffect;

  mountEffectImpl(
    fiberFlags,
    HookLayout,
    imperativeHandleEffect.bind(null, create, ref),
    effectDeps
  );
}

mountImperativeHandle函数作为入口函数，主要就是调用mountEffectImpl创建副作用：

获取依赖，并将ref（第一个参数）作为依赖添加，以便后面对比判断是否更新
获取Flag标识当前副作用
通过bind绑定imperativeHandleEffect，然后调用mountEffectImpl创建副作用

上面知道我们传入的第二个参数即create函数，在调用时实际执行的imperativeHandleEffect函数来对ref进行处理,其中该函数逻辑如下：


function imperativeHandleEffect<T>(
  create: () => T,
  ref: { current: T | null } | ((inst: T | null) => mixed) | null | void
): void | (() => void) {
  if (typeof ref === "function") {
	  const refCallback = ref;
	  const inst = create(); // 创建实例
	  const refCleanup = refCallback(inst); // 执行 refCallback 并返回结果
	  return () => {
	    if (typeof refCleanup === "function") {
	      refCleanup(); // 如果 refCleanup 是函数，则调用它
	    } else {
	      refCallback(null); // 否则调用 refCallback(null) 清除引用
	    }
	  };
	} else if (ref !== null && ref !== undefined) {
    const refObject = ref;
    const inst = create();
    refObject.current = inst;
    return () => {
      refObject.current = null;
    };
  }
}

从代码能看出来，由于ref可以是对象、或者函数，所以这里进行了差别处理。当为对象时，会将暴露的对象绑定在current中，即可以通过ref.current来访问暴露的属性，然后会返回一个清除函数在组件卸载时会调用，来清除引用便于垃圾收回。当ref是函数时，会讲create执行结果作为入参传递给ref函数，然后自行处理（通过ref.current不能访问）,根据返回的值是否是函数判断进一步处理清除函数，方便垃圾回收。

mountEffectImpl函数如下：

function mountEffectImpl(
  fiberFlags: Flags,
  hookFlags: HookFlags,
  create: () => (() => void) | void,
  deps: Array<mixed> | void | null
): void {
  const hook = mountWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  currentlyRenderingFiber.flags |= fiberFlags;
  hook.memoizedState = pushEffect(
    HookHasEffect | hookFlags,
    create,
    createEffectInstance(),
    nextDeps
  );
}

主要就是通过mountWorkInProgressHook基于当前fiber创建一个初始化hook，然后将依赖和create传入pushEffect处理副作用列表。

pushEffect函数如下：

function pushEffect(
  tag: HookFlags,
  create: () => (() => void) | void,
  inst: EffectInstance,
  deps: Array<mixed> | null
): Effect {
  const effect: Effect = {
    tag,
    create,
    inst,
    deps,
    // Circular
    next: (null: any),
  };
  let componentUpdateQueue: null | FunctionComponentUpdateQueue =
    (currentlyRenderingFiber.updateQueue: any);
  // 首次渲染时 为null
  if (componentUpdateQueue === null) {
    componentUpdateQueue = createFunctionComponentUpdateQueue();
    currentlyRenderingFiber.updateQueue = (componentUpdateQueue: any);
    componentUpdateQueue.lastEffect = effect.next = effect;
  } else {
    const lastEffect = componentUpdateQueue.lastEffect;
    if (lastEffect === null) {
      componentUpdateQueue.lastEffect = effect.next = effect;
    } else {
      const firstEffect = lastEffect.next;
      lastEffect.next = effect;
      effect.next = firstEffect;
      componentUpdateQueue.lastEffect = effect;
    }
  }
  return effect;
}


createFunctionComponentUpdateQueue = () => {
  return {
    lastEffect: null,
    events: null,
    stores: null,
    memoCache: null,
  };
};

主要逻辑就是根据当前配置创建effect副作用，并将其添加到更新队列updateQueue中。在代码中通过判断 currentlyRenderingFiber.updateQueue是否为null来判断当前是否有其他的更新任务，如果没有则通过createFunctionComponentUpdateQueue创建初始更新队列，反之则直接添加到链表尾部。

updateQueue更新队列也是是通过lastEffect指向尾节点的循环链表，可以更好的进行插入和快速找到头节点

至此我们介绍了在mount阶段依次调用的函数链， mountImperativeHandle - mountEffectImpl - mountWorkInProgressHook - pushEffect 最终初始化构建了从fiber到更新的链式关系。其中本次需要更新的状态保存在updateQueue中，而memoizedState中保存的是上一次渲染更新的状态，为了方便状态的追踪和新状态的基准值。
在这里插入图片描述

Update更新渲染

在这里先介绍下函数调用关系，然后再针对该调用链以此介绍。通过dispatcher派发之后函数调用如下：updateImperativeHandle - updateEffectImpl - imperativeHandleEffect - updateWorkInProgressHook - pushEffect 其中 imperativeHandleEffect和pushEffect在Mount阶段已经讲过，所以这里就跳过，主要介绍其他函数。

updateImperativeHandle函数

function updateImperativeHandle<T>(
  ref: { current: T | null } | ((inst: T | null) => mixed) | null | void,
  create: () => T,
  deps: Array<mixed> | void | null
): void {
  // TODO: If deps are provided, should we skip comparing the ref itself?
  const effectDeps =
    deps !== null && deps !== undefined ? deps.concat([ref]) : null;
  updateEffectImpl(
    UpdateEffect,
    HookLayout,
    imperativeHandleEffect.bind(null, create, ref),
    effectDeps
  );
}

从代码能看出该函数主要工作就是调用updateEffectImpl来处理副作用：

获取deps依赖数组，并将ref（第一个参数）作为依赖添加
绑定imperativeHandleEffect处理ref，并调用updateEffectImpl更新副作用列表

updateEffectImpl函数：

function updateEffectImpl(
  fiberFlags: Flags,
  hookFlags: HookFlags,
  create: () => (() => void) | void,
  deps: Array<mixed> | void | null
): void {
  const hook = updateWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  const effect: Effect = hook.memoizedState;
  const inst = effect.inst;

  // currentHook is null on initial mount when rerendering after a render phase
  // state update or for strict mode.
  // 如果 currentHook 存在，表示这是一个更新操作，否则是一个初始化操作。
  if (currentHook !== null) {
    if (nextDeps !== null) {
      const prevEffect: Effect = currentHook.memoizedState;
      const prevDeps = prevEffect.deps;
      if (areHookInputsEqual(nextDeps, prevDeps)) {
      	// 依赖没有变化，则传入hookFlags，不需要更新
        hook.memoizedState = pushEffect(hookFlags, create, inst, nextDeps);
        return;
      }
    }
  }

  // 通过位或运算，更新flag表示当前fiber需要更新
  currentlyRenderingFiber.flags |= fiberFlags;

  hook.memoizedState = pushEffect(
    HookHasEffect | hookFlags,
    create,
    inst,
    nextDeps
  );
}

// 通过for循环遍历依赖数组，然后通过Object.is判断是否变化
function areHookInputsEqual(
    nextDeps: Array<mixed>,
    prevDeps: Array<mixed> | null,
  ): boolean {
    if (prevDeps === null) {
      return false;
    }
    // $FlowFixMe[incompatible-use] found when upgrading Flow
    for (let i = 0; i < prevDeps.length && i < nextDeps.length; i++) {
      // $FlowFixMe[incompatible-use] found when upgrading Flow
      if (is(nextDeps[i], prevDeps[i])) {
        continue;
      }
      return false;
    }
    return true;
  }

该函数主要功能就是创建更新任务然后添加到Hook中，并对比deps是否变化来决定是否触发更新，最后更新memoizedState缓存状态。

通过updateWorkInProgressHook函数复用Hook并添加更新任务
通过areHookInputsEqual对比依赖变化，通过传入Flag来判断是否跳过更新
通过pushEffect添加副作用，并更新memoizedState缓存值

updateWorkInProgressHook函数在前面文章已经介绍过，主要就是复用Hook链表，优先复用workInProgress中的Hook，没有则克隆当前页面显示的current Hook 详情可以查看这篇文章:【React Hooks原理 - useState】

Hook数据结构中和fiber数据结构中都有memoizedState字段，但是表达的意义不同，Hook中是作为缓存的state值，但是fiber中是指向的当前fiber下的hooks队列的首个hook（hook是链表结构，指向首个，就意味着可以访问整个hooks队列）

至此Mount阶段和Update阶段就介绍完了，总的来说就是在Mount阶段进行初始化，在Update阶段创建更新任务添加到更新列表，等待Scheduler调度更新。

总结

总的来说React默认不允许父组件访问子组件中的DOM，所以需要通过forwardRef来将ref注入到子组件中，通过在子组件中绑定dom来让父组件访问。但是我们又想自定义暴露哪些属性，所以需要useImperativeHandle这个Hook来帮助完成。

forwardRef的本质就是返回一个带有特定标识符$$typeof的对象，React根据这个表示知道当前组件是ForWardRef类型，则会在执行函数组件渲染时将ref作为第二个参数传入即Component(props, ref)

useImperativeHandle可以理解为这个Hook是对forwardRef传入的ref进行了拦截，根据不同数据类型的ref做了不同处理，对于对象类型，直接将暴露的对象绑定到ref.current中（因为ref是通过useRef创建，默认会带有current属性），而函数类型则将暴露的对象作为ref函数的入参由开发者自行控制。所以ref是对象时，父组件可以通过ref.curren访问，而ref是函数时则需要根据设置访问，此时ref.current === null。

题外话 - 号外

本文也是根据这些文章学习进行梳理在自己理解的基础上书写的，如有问题，还请指正。

有兴趣的朋友可以关注一下公众号，方便随时随地一起交流学习。
在这里插入图片描述

宇豪学习录

关注

12
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
【React Hooks原理 - forwardRef、useImperativeHandle】

本文从forwardRef入口结合useImperativeHandle以图文的形式从基本使用到源码解析介绍了这两个API的原理
复制链接

扫一扫

专栏目录