搜尋
首頁web前端js教程帶你了解React中的Ref,值得了解的知識點分享

這篇文章帶大家了解React中的Ref,介紹一些關於 Ref 你需要知道的知識點,希望對大家有幫助!

帶你了解React中的Ref,值得了解的知識點分享

Intro

在 React 專案中,有很多場景需要用到 Ref。例如使用ref 屬性取得DOM 節點,取得ClassComponent 物件實例;用useRef Hook 建立一個Ref 對象,以便解決像setInterval 取得不到最新的state 的問題;你也可以呼叫React.createRef 方法手動建立一個Ref 物件。 【相關推薦:Redis影片教學

雖然Ref 用起來也很簡單,但在實際專案中實戰還是難免遇到問題,這篇文章將從原始碼的角度出發梳理各種和Ref 相關的問題,理清和ref 相關的API 背後都做了什麼。看完這篇文章或許可以讓你對的 Ref 有更深入地認識。

Ref 相關的型別宣告

首先 refreference 的簡稱,也就是引用。在 react 的類型宣告檔中,可以找到好幾個和 Ref 相關的類型,這裡將它們一一列舉出來。

RefObject/MutableRefObject

interface RefObject<T> { readonly current: T | null; }
interface MutableRefObject<T> { current: T; }

使用useRef Hook 的時候回傳的就是RefObject/MutableRefObejct,這兩個型別都是定義了一個{ current: T } 的物件結構,差異是RefObject 的current 屬性是只讀的,如果修改refObject.current,Typescript 會警告⚠️。

const ref = useRef<string>(null)
ref.current = &#39;&#39; // Error

TS 錯誤:無法指派到 "current" ,因為它是唯讀屬性。

帶你了解React中的Ref,值得了解的知識點分享

檢視useRef 方法的定義,這裡用了函數重載,當傳入的泛型參數T 不包含null 時傳回RefObject<t></t>,包含null 時會回傳MutableRefObject<t></t>

function useRef<T>(initialValue: T): MutableRefObject<T>;
function useRef<T>(initialValue: T | null): RefObject<T>;

所以如果你希望建立的 ref 物件 current 屬性是可修改的,需要加上 | null

const ref = useRef<string | null>(null)
ref.current = &#39;&#39; // OK

呼叫 React.createRef() 方法時傳回的也是一個 RefObject

createRef

export function createRef(): RefObject {
  const refObject = {
    current: null,
  };
  if (__DEV__) {
    Object.seal(refObject);
  }
  return refObject;
}

RefObject/MutableRefObject 是在16.3 版本才新增的,如果使用更早的版本,需要使用Ref Callback

RefCallback

使用Ref Callback 就是傳遞一個回呼函數,react 回呼時會將對應的實例回傳過來,可以自行儲存以便調用。這個回呼函數的型別就是 RefCallback

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

使用RefCallback 範例:

import React from &#39;react&#39;

export class CustomTextInput extends React.Component {
  textInput: HTMLInputElement | null = null;

  saveInputRef = (element: HTMLInputElement | null) => {
    this.textInput = element;
  }

  render() {
    return (
      <input type="text" ref={this.saveInputRef} />
    );
  }
}

Ref/LegacyRef

在類型宣告中,還有Ref/LegacyRef 類型,它們用於泛指Ref 類型。 LegacyRef 是相容版本,在之前的舊版 ref 還可以是 字串

type Ref<T> = RefCallback<T> | RefObject<T> | null;
type LegacyRef<T> = string | Ref<T>;

了解和 Ref 相關的類型,寫起 Typescript 來才能更得心應手。

Ref 的傳遞

特殊的props

在JSX 元件上使用ref 時,我們是透過給ref 屬性設定一個Ref。我們都知道 jsx 的語法,會被 Babel 等工具編譯成 createElement 的形式。

// jsx
<App ref={ref} id="my-app" ></App>

// compiled to
React.createElement(App, {
  ref: ref,
  id: "my-app"
});

看起來 ref 和其他 prop 沒啥區別,不過如果你嘗試在元件內部列印 props.ref 卻是 undefined。並且 dev 環境控制台會給予提示。

Trying to access it will result in undefined being returned. If you need to access the same value within the child component, you should pass it as a different prop.

React 对 ref 做了啥?在 ReactElement 源码中可以看到,refRESERVED_PROPS,同样有这种待遇的还有 key,它们都会被特殊处理,从 props 中提取出来传递给 Element

const RESERVED_PROPS = {
  key: true,
  ref: true,
  __self: true,
  __source: true,
};

所以 ref 是会被特殊处理的 “props“

forwardRef

16.8.0 版本之前,Function Component 是无状态的,只会根据传入的 props render。有了 Hook 之后不仅可以有内部状态,还可以暴露方法供外部调用(需要借助 forwardRefuseImperativeHandle)。

如果直接对一个 Function Componentref,dev 环境下控制台会告警,提示你需要用 forwardRef 进行包裹起来。

function Input () {
    return <input />
}

const ref = useRef()
<Input ref={ref} />

Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

forwardRef 为何物?查看源码 ReactForwardRef.js__DEV__ 相关的代码折叠起来,它只是一个无比简单的高阶组件。接收一个 render 的 FunctionComponent,将它包裹一下定义 $$typeofREACT_FORWARD_REF_TYPEreturn 回去。

帶你了解React中的Ref,值得了解的知識點分享

跟踪代码,找到 resolveLazyComponentTag,在这里 $$typeof 会被解析成对应的 WorkTag。

帶你了解React中的Ref,值得了解的知識點分享

REACT_FORWARD_REF_TYPE 对应的 WorkTag 是 ForwardRef。紧接着 ForwardRef 又会进入 updateForwardRef 的逻辑。

case ForwardRef: {
  child = updateForwardRef(
    null,
    workInProgress,
    Component,
    resolvedProps,
    renderLanes,
  );
  return child;
}

这个方法又会调用 renderWithHooks 方法,并在第五个参数传入 ref

nextChildren = renderWithHooks(
  current,
  workInProgress,
  render,
  nextProps,
  ref, // 这里
  renderLanes,
);

继续跟踪代码,进入 renderWithHooks 方法,可以看到,ref 会作为 Component 的第二个参数传递。到这里我们可以理解被 forwardRef 包裹的 FuncitonComponent 第二个参数 ref 是从哪里来的(对比 ClassComponent contructor 第二个参数是 Context)。

帶你了解React中的Ref,值得了解的知識點分享

了解如何传递 ref,那下一个问题就是 ref 是如何被赋值的。

ref 的赋值

打断点(给 ref 赋值一个 RefCallback,在 callback 里面打断点) 跟踪到代码 commitAttachRef,在这个方法里面,会判断 Fiber 节点的 ref 是 function 还是 RefObject,依据类型处理 instance。如果这个 Fiber 节点是 HostComponent (tag = 5) 也就是 DOM 节点,instance 就是该 DOM 节点;而如果该 Fiber 节点是 ClassComponent (tag = 1),instance 就是该对象实例。

function commitAttachRef(finishedWork) {
  var ref = finishedWork.ref;

  if (ref !== null) {
    var instanceToUse = finishedWork.stateNode;

    if (typeof ref === &#39;function&#39;) {
      ref(instanceToUse);
    } else {
      ref.current = instanceToUse;
    }
  }
}

以上是 HostComponent 和 ClassComponent 中对 ref 的赋值逻辑,对于 ForwardRef 类型的组件走的是另外的代码,但行为基本是一致的,可以看这里 imperativeHandleEffect

接下里,我们继续挖掘 React 源码,看看 useRef 是如何实现的。

useRef 的内部实现

通过跟踪代码,定位到 useRef 运行时的代码 ReactFiberHooks

帶你了解React中的Ref,值得了解的知識點分享

这里有两个方法,mountRefupdateRef,顾名思义就是对应 Fiber 节点 mountupdate 时对 ref 的操作。

function updateRef<T>(initialValue: T): {|current: T|} {
  const hook = updateWorkInProgressHook();
  return hook.memoizedState;
}

function mountRef<T>(initialValue: T): {|current: T|} {
  const hook = mountWorkInProgressHook();
  const ref = {current: initialValue};
  hook.memoizedState = ref;
  return ref;
}

可以看到 mount 时,useRef 创建了一个 RefObject,并将它赋值给 hookmemoizedStateupdate 时直接将它取出返回。

不同的 Hook memoizedState 保存的内容不一样,useState 中保存 state 信息, useEffect 中 保存着 effect 对象,useRef 中保存的是 ref 对象...

mountWorkInProgressHookupdateWorkInProgressHook 方法背后是一条 Hooks 的链表,在不修改链表的情况下,每次 render useRef 都能取回同一个 memoizedState 对象,就这么简单。

应用:合并 ref

至此,我们了解了在 React 中 ref 的传递和赋值逻辑,以及 useRef 相关的源码。用一个应用题来巩固以上知识点:有一个 Input 组件,在组件内部需要通过 innerRef HTMLInputElement 来访问 DOM 节点,同时也允许组件外部 ref 该节点,需要怎么实现?

const Input = forwardRef((props, ref) => {
  const innerRef = useRef<HTMLInputElement>(null)
  return (
    <input {...props} ref={???} />
  )
})

考虑一下上面代码中的 ??? 应该怎么写。

============ 答案分割线 ==============

通过了解 Ref 相关的内部实现,很明显我们这里可以创建一个 RefCallback,在里面对多个 ref 进行赋值就可以了。

export function combineRefs<T = any>(
  refs: Array<MutableRefObject<T | null> | RefCallback<T>>
): React.RefCallback<T> {
  return value => {
    refs.forEach(ref => {
      if (typeof ref === &#39;function&#39;) {
        ref(value);
      } else if (ref !== null) {
        ref.current = value;
      }
    });
  };
}

const Input = forwardRef((props, ref) => {
  const innerRef = useRef<HTMLInputElement>(null)
  return (
    <input {...props} ref={combineRefs(ref, innerRef)} />
  )
})

更多编程相关知识,请访问:编程入门!!

以上是帶你了解React中的Ref,值得了解的知識點分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文轉載於:掘金社区。如有侵權,請聯絡admin@php.cn刪除
react中canvas的用法是什么react中canvas的用法是什么Apr 27, 2022 pm 03:12 PM

在react中,canvas用于绘制各种图表、动画等;可以利用“react-konva”插件使用canvas,该插件是一个canvas第三方库,用于使用React操作canvas绘制复杂的画布图形,并提供了元素的事件机制和拖放操作的支持。

react中antd和dva是什么意思react中antd和dva是什么意思Apr 21, 2022 pm 03:25 PM

在react中,antd是基于Ant Design的React UI组件库,主要用于研发企业级中后台产品;dva是一个基于redux和“redux-saga”的数据流方案,内置了“react-router”和fetch,可理解为应用框架。

React是双向数据流吗React是双向数据流吗Apr 21, 2022 am 11:18 AM

React不是双向数据流,而是单向数据流。单向数据流是指数据在某个节点被改动后,只会影响一个方向上的其他节点;React中的表现就是数据主要通过props从父节点传递到子节点,若父级的某个props改变了,React会重渲染所有子节点。

react中为什么使用nodereact中为什么使用nodeApr 21, 2022 am 10:34 AM

因为在react中需要利用到webpack,而webpack依赖nodejs;webpack是一个模块打包机,在执行打包压缩的时候是依赖nodejs的,没有nodejs就不能使用webpack,所以react需要使用nodejs。

react中forceupdate的用法是什么react中forceupdate的用法是什么Apr 19, 2022 pm 12:03 PM

在react中,forceupdate()用于强制使组件跳过shouldComponentUpdate(),直接调用render(),可以触发组件的正常生命周期方法,语法为“component.forceUpdate(callback)”。

react是组件化开发吗react是组件化开发吗Apr 22, 2022 am 10:44 AM

react是组件化开发;组件化是React的核心思想,可以开发出一个个独立可复用的小组件来构造应用,任何的应用都会被抽象成一颗组件树,组件化开发也就是将一个页面拆分成一个个小的功能模块,每个功能完成自己这部分独立功能。

react与vue的虚拟dom有什么区别react与vue的虚拟dom有什么区别Apr 22, 2022 am 11:11 AM

react与vue的虚拟dom没有区别;react和vue的虚拟dom都是用js对象来模拟真实DOM,用虚拟DOM的diff来最小化更新真实DOM,可以减小不必要的性能损耗,按颗粒度分为不同的类型比较同层级dom节点,进行增、删、移的操作。

react和reactdom有什么区别react和reactdom有什么区别Apr 27, 2022 am 10:26 AM

react和reactdom的区别是:ReactDom只做和浏览器或DOM相关的操作,例如“ReactDOM.findDOMNode()”操作;而react负责除浏览器和DOM以外的相关操作,ReactDom是React的一部分。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具