脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React Hook-useForkRe

React自定义Hook-useForkRef的具体使用

 更新时间：2022年03月07日 09:54:21   作者：明里人  
本文主要介绍了React自定义Hook-useForkRef的具体使用，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

开篇

使用过 React 技术栈的同学相信都使用过 ref 传递给 render 中的元素，而在使用 React 封装组件时，会有这样一个场景：

组件将 props.children 作为 render 内容；组件内部会创建 ref 绑定到 props.children 上。

我们知道，元素上只能绑定一个 ref 属性引用，但对于上面这个场景，props.children 上可能已经存在一个 ref 属性，而组件内部定义的 ref 也会绑定到 props.children 上。
我们要想一种方式，将两者的 ref 都可以生效于元素上。

思路

首先我们回顾一下 React 创建 ref 的方式：

  • React.createRef()：React 16.3 版本提供的 class 创建 ref 方式；
  • React.useRef()：React Hooks 提供的 函数组件 创建 ref 方式；
  • 回调 Refs：传递一个函数作为元素的 ref 属性，此函数接收 React 组件实例或 HTML DOM 元素作为参数。

综合考虑，既然 回调 Refs 允许我们传递一个函数，并且接收元素实例作为这个函数的参数，那我们就可以定义一个这样的函数，在函数内编写我们的逻辑来处理 多个 ref 绑定元素实例的场景。（函数的灵活性）

实现

  • 编写一个函数（闭包函数），接收 props.children.ref 和 组件内 ref 作为参数；
  • 函数（闭包函数）需要 return 返回一个函数，这个函数将作为 回调 Refs 去作用于元素；
  • 在 return 的这个函数中，将函数参数（元素引用）绑定到 props.children.ref 和 组件内 ref 上。

上代码：

function forkRef(refA, refB) {
  return refValue => {
    setRef(refA, refValue);
    setRef(refB, refValue);
  };
}

function setRef(ref, value) {
  if (typeof ref === 'function') {
    ref(value);
  } else if (ref) {
    ref.current = value;
  }
}

在 setRef 中会针对创建 ref 的方式做不同处理，比如：React.createRef 和 React.useRef 创建的 ref 是一个具有 current 属性的对象。

使用：

const nodeRef = React.useRef(null); // 组件内部的 ref

const handleRef = forkRef(props.children.ref, nodeRef);

const childrenProps = { ref: handleRef };

return React.cloneElement(children, childrenProps);

自定义 Hook - useForkRef

在 Hook 函数组件中，我们可以借助于 React.memo() 优化一下 forkRef() 的逻辑，避免每次组件更新时都创建一个新的闭包函数。
下面我们使用 TS 编写一个 useForkRef：

import * as React from 'react';

interface MutableRefObject<T> {
  current: T;
}

type Ref<T> = ((instance: T | null) => void) | MutableRefObject<T> | null;

export function setRef(ref: Ref<unknown>, value: unknown) {
  if (typeof ref === 'function') {
    ref(value);
  } else if (ref) {
    ref.current = value;
  }
}

export default function useForkRef(refA: Ref<unknown>, refB: Ref<unknown>) {
  return React.useMemo(() => {
    if (refA == null && refB == null) {
      return null;
    }
    return (refValue: unknown) => {
      setRef(refA, refValue);
      setRef(refB, refValue);
    };
  }, [refA, refB]);
}

使用：

const nodeRef = React.useRef<HTMLElement>(null); // 组件内部的 ref
const handleRef = useForkRef(children.ref, nodeRef);

const childrenProps: any = { ref: handleRef };
React.cloneElement(children, childrenProps)

到此这篇关于React自定义Hook-useForkRef的具体使用的文章就介绍到这了,更多相关React Hook-useForkRe内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 详解React 在服务端渲染的实现

    详解React 在服务端渲染的实现

    这篇文章主要介绍了详解React 在服务端渲染的实现,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • 详解操作虚拟dom模拟react视图渲染

    详解操作虚拟dom模拟react视图渲染

    这篇文章主要介绍了详解操作虚拟dom模拟react视图渲染，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • react中使用Modal.confirm数据不更新的问题完美解决方案

    react中使用Modal.confirm数据不更新的问题完美解决方案

    这篇文章主要介绍了react中使用Modal.confirm数据不更新的问题解决方案,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • React Hooks中模拟Vue生命周期函数的指南

    React Hooks中模拟Vue生命周期函数的指南

    React Hooks 提供了一种在函数组件中使用状态和其他 React 特性的方式,而不需要编写类组件,Vue 的生命周期函数和 React Hooks 之间有一定的对应关系,本文给大家介绍了React Hooks中模拟Vue生命周期函数的指南,需要的朋友可以参考下
    2024-10-10
  • React从Class方式转Hooks详解

    React从Class方式转Hooks详解

    这篇文章主要介绍了React从Class方式转Hooks详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-09-09
  • React实现轮播效果

    React实现轮播效果

    这篇文章主要为大家详细介绍了React实现轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-08-08
  • 一篇文章教你用React实现菜谱系统

    一篇文章教你用React实现菜谱系统

    本篇文章主要介绍了React实现菜谱软件的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2021-09-09
  • React 小技巧教你如何摆脱hooks依赖烦恼

    React 小技巧教你如何摆脱hooks依赖烦恼

    Hooks 是一种函数，该函数允许您从函数式组件 “勾住(hook into)” React 状态和生命周期功能。 Hooks 在类内部不起作用 - 它们允许你无需类就使用 React，本文带领大家学习React 小技巧教你如何摆脱hooks依赖烦恼，感兴趣的朋友一起看看吧
    2021-05-05
  • React中useRef hook的简单用法

    React中useRef hook的简单用法

    useRef是react的自定义hook,它用来引用一个不需要渲染的值,这篇文章介绍useRef的简单用法,感兴趣的朋友一起看看吧
    2024-01-01
  • 在react项目中webpack使用mock数据的操作方法

    在react项目中webpack使用mock数据的操作方法

    这篇文章主要介绍了在react项目中webpack使用mock数据的操作方法,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-06-06

最新评论