Jadual Kandungan
Pengenalan
Pertama sekali,
Menggunakan adalah untuk menghantar fungsi panggil balik Apabila bertindak balas panggilan balik, kejadian yang sepadan akan dihantar semula dan anda boleh menyimpannya sendiri memanggil. Jenis fungsi panggil balik ini ialah
Dalam pengisytiharan jenis, terdapat juga Ruj/ Jenis LegacyRef , ia digunakan untuk merujuk kepada jenis Ref secara amnya. ialah versi yang serasi Dalam versi lama sebelumnya,
Alat khas
Apabila menggunakan pada komponen JSX, kami menetapkan
forwardRef
ref 的赋值
useRef 的内部实现
应用:合并 ref
Rumah hujung hadapan web tutorial js Biarkan anda memahami Ref dalam React dan berkongsi mata pengetahuan yang patut diketahui.

Biarkan anda memahami Ref dalam React dan berkongsi mata pengetahuan yang patut diketahui.

Mar 22, 2022 am 11:21 AM
react ref

Artikel ini akan membawa anda memahami Ref dalam React dan memperkenalkan beberapa perkara pengetahuan yang perlu anda ketahui tentang Ref. Saya harap ia akan membantu semua orang!

Biarkan anda memahami Ref dalam React dan berkongsi mata pengetahuan yang patut diketahui.

Pengenalan

Dalam projek React, terdapat banyak senario di mana Ref diperlukan. Contohnya, gunakan atribut ref untuk mendapatkan nod DOM dan dapatkan contoh objek ClassComponent; juga boleh memanggil kaedah useRef untuk menciptanya secara manual objek setInterval. [Cadangan berkaitan: React.createRefTutorial video RedisRef]Walaupun

sangat mudah digunakan, masih tidak dapat dielakkan untuk menghadapi masalah dalam projek sebenar Artikel ini akan bermula dari

Dari perspektif kod sumber Ref, kami menyelesaikan pelbagai isu berkaitan dan menjelaskan perkara yang dilakukan di sebalik API yang berkaitan dengan . Selepas membaca artikel ini, anda mungkin mempunyai pemahaman yang lebih mendalam tentang Ref. refRefRujuk pengisytiharan jenis berkaitan

Pertama sekali,

ialah singkatan daripada

, yang merupakan rujukan. Dalam fail pengisytiharan jenis ref, anda boleh menemui beberapa jenis yang berkaitan dengan Ruj, dan ia disenaraikan di sini. referencereactRefObject/MutableRefObject

Apabila menggunakan
interface RefObject<T> { readonly current: T | null; }
interface MutableRefObject<T> { current: T; }
Salin selepas log masuk
Hook, ia mengembalikan RefObject/MutableRefObejct kedua-dua jenis mentakrifkan struktur objek

> ialah useRefbaca sahaja{ current: T } Jika RefObject diubah suai, Skrip taip akan memberi amaran ⚠️. refObject.current

Ralat TS: Tidak boleh ditetapkan kepada "semasa" kerana ia adalah sifat baca sahaja.
const ref = useRef<string>(null)
ref.current = &#39;&#39; // Error
Salin selepas log masuk

Lihat takrif kaedah Biarkan anda memahami Ref dalam React dan berkongsi mata pengetahuan yang patut diketahui. Di sini,

lebih muatan

digunakan apabila parameter generik masuk useRef adalah tidak Mengembalikan apabila mengandungi dan T apabila mengandungi null. RefObject<T>nullMutableRefObject<T>Jadi jika anda mahu sifat semasa objek ref yang dicipta boleh diubah suai, anda perlu menambah

.
function useRef<T>(initialValue: T): MutableRefObject<T>;
function useRef<T>(initialValue: T | null): RefObject<T>;
Salin selepas log masuk

| nullApabila memanggil kaedah

, kaedah itu juga mengembalikan
const ref = useRef<string | null>(null)
ref.current = &#39;&#39; // OK
Salin selepas log masuk
.

React.createRef()RefObjectcreateRef

telah ditambahkan dalam versi
export function createRef(): RefObject {
  const refObject = {
    current: null,
  };
  if (__DEV__) {
    Object.seal(refObject);
  }
  return refObject;
}
Salin selepas log masuk
Jika anda menggunakan versi terdahulu, anda perlu menggunakan

. RefObject/MutableRefObject16.3Ref CallbackRefCallback

Menggunakan adalah untuk menghantar fungsi panggil balik Apabila bertindak balas panggilan balik, kejadian yang sepadan akan dihantar semula dan anda boleh menyimpannya sendiri memanggil. Jenis fungsi panggil balik ini ialah

.

Ref CallbackRefCallbackMenggunakan

Contoh:
type RefCallback<T> = (instance: T | null) => void;
Salin selepas log masuk

RefCallback

Ref/LegacyRef
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} />
    );
  }
}
Salin selepas log masuk

Dalam pengisytiharan jenis, terdapat juga Ruj/ Jenis LegacyRef , ia digunakan untuk merujuk kepada jenis Ref secara amnya. ialah versi yang serasi Dalam versi lama sebelumnya,

juga boleh menjadi

rentetanLegacyRef. refHanya apabila anda memahami jenis yang berkaitan dengan Ref anda boleh menjadi lebih selesa menulis TypeScript.

type Ref<T> = RefCallback<T> | RefObject<T> | null;
type LegacyRef<T> = string | Ref<T>;
Salin selepas log masuk
Rujuk lulus

Alat khas

Apabila menggunakan pada komponen JSX, kami menetapkan

. Kita semua tahu bahawa sintaks

akan disusun ke dalam bentuk ref oleh alat seperti Babel. refRefjsxNampaknya createElement tidak berbeza dengan prop lain, tetapi jika anda cuba mencetak props.ref di dalam komponen itu adalah

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

// compiled to
React.createElement(App, {
  ref: ref,
  id: "my-app"
});
Salin selepas log masuk
konsol persekitaran akan memberikan gesaan.

refundefinedCuba mengaksesnya akan menyebabkan dev dikembalikan Jika anda perlu mengakses nilai yang sama dalam komponen anak, anda harus menghantarnya sebagai prop yang berbeza.

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

const RESERVED_PROPS = {
  key: true,
  ref: true,
  __self: true,
  __source: true,
};
Salin selepas log masuk

所以 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} />
Salin selepas log masuk

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 回去。

Biarkan anda memahami Ref dalam React dan berkongsi mata pengetahuan yang patut diketahui.

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

Biarkan anda memahami Ref dalam React dan berkongsi mata pengetahuan yang patut diketahui.

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

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

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

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

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

Biarkan anda memahami Ref dalam React dan berkongsi mata pengetahuan yang patut diketahui.

了解如何传递 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;
    }
  }
}
Salin selepas log masuk

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

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

useRef 的内部实现

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

Biarkan anda memahami Ref dalam React dan berkongsi mata pengetahuan yang patut diketahui.

这里有两个方法,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;
}
Salin selepas log masuk

可以看到 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={???} />
  )
})
Salin selepas log masuk

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

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

通过了解 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)} />
  )
})
Salin selepas log masuk

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

Atas ialah kandungan terperinci Biarkan anda memahami Ref dalam React dan berkongsi mata pengetahuan yang patut diketahui.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara membina apl sembang masa nyata dengan React dan WebSocket Cara membina apl sembang masa nyata dengan React dan WebSocket Sep 26, 2023 pm 07:46 PM

Cara membina aplikasi sembang masa nyata menggunakan React dan WebSocket Pengenalan: Dengan perkembangan pesat Internet, komunikasi masa nyata telah menarik lebih banyak perhatian. Apl sembang langsung telah menjadi sebahagian daripada kehidupan sosial dan kerja moden. Artikel ini akan memperkenalkan cara membina aplikasi sembang masa nyata yang ringkas menggunakan React dan WebSocket, dan memberikan contoh kod khusus. 1. Persediaan teknikal Sebelum mula membina aplikasi sembang masa nyata, kita perlu menyediakan teknologi dan alatan berikut: React: satu untuk membina

Panduan untuk Bertindak balas pemisahan bahagian hadapan dan belakang: Cara mencapai penyahgandingan dan penggunaan bebas bagi bahagian hadapan dan belakang Panduan untuk Bertindak balas pemisahan bahagian hadapan dan belakang: Cara mencapai penyahgandingan dan penggunaan bebas bagi bahagian hadapan dan belakang Sep 28, 2023 am 10:48 AM

Bertindak balas panduan pemisahan bahagian hadapan dan hujung belakang: Bagaimana untuk mencapai penyahgandingan bahagian hadapan dan belakang serta penggunaan bebas, contoh kod khusus diperlukan Dalam persekitaran pembangunan web hari ini, pemisahan bahagian hadapan dan belakang telah menjadi satu trend . Dengan mengasingkan kod hadapan dan belakang, kerja pembangunan boleh dibuat lebih fleksibel, cekap dan memudahkan kerjasama pasukan. Artikel ini akan memperkenalkan cara menggunakan React untuk mencapai pemisahan bahagian hadapan dan belakang, seterusnya mencapai matlamat penyahgandingan dan penggunaan bebas. Pertama, kita perlu memahami apa itu pemisahan bahagian hadapan dan belakang. Dalam model pembangunan web tradisional, bahagian hadapan dan bahagian belakang digabungkan

Cara membina aplikasi web yang ringkas dan mudah digunakan dengan React dan Flask Cara membina aplikasi web yang ringkas dan mudah digunakan dengan React dan Flask Sep 27, 2023 am 11:09 AM

Cara menggunakan React dan Flask untuk membina aplikasi web yang ringkas dan mudah digunakan Pengenalan: Dengan perkembangan Internet, keperluan aplikasi web menjadi semakin pelbagai dan kompleks. Untuk memenuhi keperluan pengguna untuk kemudahan penggunaan dan prestasi, semakin penting untuk menggunakan tindanan teknologi moden untuk membina aplikasi rangkaian. React dan Flask ialah dua rangka kerja yang sangat popular untuk pembangunan bahagian hadapan dan belakang, dan ia berfungsi dengan baik bersama-sama untuk membina aplikasi web yang ringkas dan mudah digunakan. Artikel ini akan memperincikan cara memanfaatkan React dan Flask

Cara membina aplikasi pemesejan yang boleh dipercayai dengan React dan RabbitMQ Cara membina aplikasi pemesejan yang boleh dipercayai dengan React dan RabbitMQ Sep 28, 2023 pm 08:24 PM

Cara membina aplikasi pemesejan yang boleh dipercayai dengan React dan RabbitMQ Pengenalan: Aplikasi moden perlu menyokong pemesejan yang boleh dipercayai untuk mencapai ciri seperti kemas kini masa nyata dan penyegerakan data. React ialah perpustakaan JavaScript yang popular untuk membina antara muka pengguna, manakala RabbitMQ ialah perisian tengah pemesejan yang boleh dipercayai. Artikel ini akan memperkenalkan cara menggabungkan React dan RabbitMQ untuk membina aplikasi pemesejan yang boleh dipercayai dan memberikan contoh kod khusus. Gambaran keseluruhan RabbitMQ:

Panduan reka bentuk responsif bertindak balas: Cara mencapai kesan susun atur bahagian hadapan yang adaptif Panduan reka bentuk responsif bertindak balas: Cara mencapai kesan susun atur bahagian hadapan yang adaptif Sep 26, 2023 am 11:34 AM

Panduan Reka Bentuk Responsif React: Cara Mencapai Kesan Susun Adaptif Bahagian Hadapan Dengan populariti peranti mudah alih dan permintaan pengguna yang semakin meningkat untuk pengalaman berbilang skrin, reka bentuk responsif telah menjadi salah satu pertimbangan penting dalam pembangunan bahagian hadapan moden. React, sebagai salah satu rangka kerja bahagian hadapan yang paling popular pada masa ini, menyediakan pelbagai alatan dan komponen untuk membantu pembangun mencapai kesan reka letak penyesuaian. Artikel ini akan berkongsi beberapa garis panduan dan petua untuk melaksanakan reka bentuk responsif menggunakan React, dan menyediakan contoh kod khusus untuk rujukan. Fle menggunakan React

Panduan Pengguna Penghala React: Cara melaksanakan kawalan penghalaan bahagian hadapan Panduan Pengguna Penghala React: Cara melaksanakan kawalan penghalaan bahagian hadapan Sep 29, 2023 pm 05:45 PM

Panduan Pengguna ReactRouter: Cara Melaksanakan Kawalan Penghalaan Hadapan Dengan populariti aplikasi satu halaman, penghalaan bahagian hadapan telah menjadi bahagian penting yang tidak boleh diabaikan. Sebagai perpustakaan penghalaan paling popular dalam ekosistem React, ReactRouter menyediakan fungsi yang kaya dan API yang mudah digunakan, menjadikan pelaksanaan penghalaan bahagian hadapan sangat mudah dan fleksibel. Artikel ini akan memperkenalkan cara menggunakan ReactRouter dan menyediakan beberapa contoh kod khusus. Untuk memasang ReactRouter dahulu, kita perlukan

Panduan penyahpepijatan kod tindak balas: Cara mencari dan menyelesaikan pepijat bahagian hadapan dengan cepat Panduan penyahpepijatan kod tindak balas: Cara mencari dan menyelesaikan pepijat bahagian hadapan dengan cepat Sep 26, 2023 pm 02:25 PM

Panduan penyahpepijatan kod tindak balas: Cara mencari dan menyelesaikan pepijat bahagian hadapan dengan cepat Pengenalan: Semasa membangunkan aplikasi React, anda sering menghadapi pelbagai pepijat yang mungkin ranap aplikasi atau menyebabkan tingkah laku yang salah. Oleh itu, menguasai kemahiran penyahpepijatan adalah keupayaan penting untuk setiap pembangun React. Artikel ini akan memperkenalkan beberapa teknik praktikal untuk mencari dan menyelesaikan pepijat bahagian hadapan, dan menyediakan contoh kod khusus untuk membantu pembaca mencari dan menyelesaikan pepijat dengan cepat dalam aplikasi React. 1. Pemilihan alat nyahpepijat: Dalam Re

Cara membina aplikasi analisis data pantas menggunakan React dan Google BigQuery Cara membina aplikasi analisis data pantas menggunakan React dan Google BigQuery Sep 26, 2023 pm 06:12 PM

Cara menggunakan React dan Google BigQuery untuk membina aplikasi analisis data yang pantas Pengenalan: Dalam era ledakan maklumat hari ini, analisis data telah menjadi pautan yang sangat diperlukan dalam pelbagai industri. Antaranya, membina aplikasi analisis data yang pantas dan cekap telah menjadi matlamat yang diusahakan oleh banyak syarikat dan individu. Artikel ini akan memperkenalkan cara menggunakan React dan Google BigQuery untuk membina aplikasi analisis data yang pantas dan memberikan contoh kod terperinci. 1. Gambaran Keseluruhan React ialah alat untuk membina

See all articles