在使用 React 進(jìn)行開發(fā)過程中，或多或少使用過 Refs 進(jìn)行 DOM 操作或者訪問一些DOM上的API，又或使用 Refs 保存數(shù)據(jù)。不管怎么說 Refs 總是 React 提供的一大助力，這篇文章主要介紹 Refs 功能和使用場景以及注意事項(xiàng)。希望能增強(qiáng)對 Refs 的理解，掌握好這把利劍。

什么是 Refs？

Refs 是 React 提供的用來保存 object 引用的一個解決方案，在函數(shù)式組件使用 useRef 創(chuàng)建一個 ref 對象，ref 對象存在一個可直接修改的 current 屬性，內(nèi)容都是存在 current 上。Refs 使用場景主要分為兩個方向，其一是實(shí)現(xiàn) DOM 訪問與操控、在兩次render之間傳遞數(shù)據(jù)內(nèi)容【和state機(jī)制有很大不同，下文會有對比介紹】。如果在組件返回的 jsx dom上綁定了 ref 屬性，React 在處理 jsx 時會把該dom節(jié)點(diǎn)【原生node節(jié)點(diǎn)】的引用存儲在 ref.current 上。

使用方式

分為三步：

• 第一步、使用 useRef 創(chuàng)建 ref 對象（useRef 是 FC hooks， class 組件使用 React.createRef() 創(chuàng)建 ）
• 第二步、賦值&使用【操作dom則綁定為dom的ref屬性的值，用于保存值的時候傳遞內(nèi)容給 ref.current】,
• 第三步、訪問ref內(nèi)容【進(jìn)行dom對應(yīng)的api訪問，進(jìn)行 scroll 、focus等操作。又或者從current中讀取保存的數(shù)據(jù)】最終的目的還是最后訪問拿到對應(yīng)的數(shù)據(jù)進(jìn)行操作。下邊我們分別用兩個小 demo 簡單先看看用法，理論和總結(jié)在后邊一點(diǎn)。

Example one 實(shí)現(xiàn)點(diǎn)擊按鈕 focus input 框

import React, { useRef } from "react";

export default function Comp() {
  // 第一步：使用 useRef 創(chuàng)建一個 ref 對象 { current: null }
  const ref = useRef();

  function handleClick() {
    // 第三步：訪問到 ref 上存的內(nèi)容，這里是 input 的node節(jié)點(diǎn)
    ref.current.focus();
  }

  // 第二步：賦值 ref
  return (
    <>
      <input ref={ref} />
      <button onClick={handleClick}>開始輸入</button>
    </>
  );
}

Example two 實(shí)現(xiàn)數(shù)據(jù)發(fā)送3s內(nèi)撤回功能：在點(diǎn)擊發(fā)送后3s內(nèi)如果點(diǎn)擊 “取消發(fā)送” 則取消本次發(fā)送

簡單起見我們按鈕不實(shí)際發(fā)送請求，定時 3s 如果3s內(nèi)點(diǎn)擊了 “取消發(fā)送”則取消發(fā)送。發(fā)送功能用提醒 “已發(fā)送”代替，出現(xiàn)“已發(fā)送”表示執(zhí)行了發(fā)送。

import React, { useRef, useState } from "react";

export default function CompA() {
  // 第一步：使用useRef 創(chuàng)建 ref 對象
  const ref = useRef();
  const [isSending, setIsSending] = useState(false);

  function send() {
    // ...
    window.alert("消息已發(fā)送！");
    setIsSending(false);
  }

  function undo() {
    // 第三步： 訪問存在 ref 上的 timeout ID， 進(jìn)行定時取消
    clearTimeout(ref.current);
  }

  function handleClickSendBtn() {
    setIsSending(true);
    // 第二步： 賦值，將 timeout ID 存在 ref 上
    ref.current = setTimeout(send, 3000);
  }

  function handleClickCancelBtn() {
    undo();
    setIsSending(false);
  }

  return (
    <>
      <button onClick={handleClickSendBtn} disabled={isSending}>
        {isSending ? "發(fā)送中..." : "發(fā)送"}
      </button>
      {isSending && <button onClick={handleClickCancelBtn}>取消發(fā)送</button>}
    </>
  );
}

Refs 核心要點(diǎn)

我們通過兩個簡單 case 演示了一下，DOM 操作 以及用于在兩次 re-render 之間傳遞內(nèi)容（case 2 傳遞的內(nèi)容是 timeout 的ID）。在使用 Refs 的過程中有幾點(diǎn)尤其需要注意。

避免重復(fù)創(chuàng)建 ref 內(nèi)容

在使用 useRef 進(jìn)行創(chuàng)建 ref 時可以傳遞 null、number 、object 等內(nèi)容也可以傳遞初始化函數(shù)。React 只會保存一次初始值，并把它帶到下一次 render 中。因此在 useRef 在創(chuàng)建ref的時候傳遞重復(fù)的內(nèi)容是不生效的，如果你認(rèn)為每次都生成一個新的值賦給ref但是React給你的卻是第一次傳遞的值，這可能不符合你的預(yù)期。

import React, { useEffect, useRef, useState } from "react";

export function CompB() {
  // 注意： 這個部分不會每次生成一個新的時間戳，只會采用 mounted 時新建的第一次時間戳。
  const ref = useRef(+new Date());
  
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`第${count}渲染時間：`, +new Date());
    console.log("ref", ref.current);
  });

  function handleClick() {
    // 為了讓點(diǎn)擊時，更新 state 觸發(fā) re-render
    setCount(count + 1);
  }

  return (
    <>
      <button onClick={handleClick}>點(diǎn)擊讓組件渲染</button>
    </>
  );
}

注意：效果圖中初始化的時候會打印兩次重復(fù)的第0次渲染，是因?yàn)?React 在 dev 模式下會執(zhí)行兩遍組件內(nèi)容，檢測組件是否是純組件。并非代碼問題，后續(xù)研讀源碼時會有文章介紹，歡迎關(guān)注。

ref.current 存儲的內(nèi)容修改是突變

對于 state 來說，直接修改state不會生效。需要使用 useState 給的第二個返回值來進(jìn)行修改。而 ref 則是可直接修改 current 屬性上的內(nèi)容，并且修改后可以立即取到值。ref存儲的實(shí)際就是一個引用，因此是可突變的。

import React, { useRef } from 'react';
export function Comp() {
  const ref = useRef(0);
  
  useEffect(()=>{
    console.log(ref.current); // 0
    // 突變
    ref.current = ref.current + 1;
    console.log(ref.current); // 1
  });
  
  return <div></div>
}

ref 作為數(shù)據(jù)存儲時內(nèi)容的變化不會引起 re-render

React 組件的 re-render 的觸發(fā)一般是【state、props、context】中的出現(xiàn)變化引起的。修改 Ref 的內(nèi)容不會引起組件的 re-render 因此不能用 ref 去干預(yù) React 生成jsx。換句話說就是不能用在jsx中做渲染或者條件判斷，不然可能得到?jīng)]辦法預(yù)料的jsx結(jié)果。

ref 的讀寫只能在 useEffect 或者回調(diào)函數(shù)中進(jìn)行

React 約定 state、props、context 都是一樣的就應(yīng)該輸出同樣的jsx內(nèi)容，只要這三個要素不變那么以不同的調(diào)用順序執(zhí)行組件應(yīng)該得到同樣的結(jié)果。要說清楚為什么Ref的讀寫只能在useEffect和回調(diào)函數(shù)中，得先鋪墊一下React的一些架構(gòu)知識。

React 架構(gòu)上分為三個部分【調(diào)度器Scheduler、協(xié)調(diào)器Reconciler、渲染器Renderer】，整體上又是兩個階段【render 階段，commit階段】。render 階段的目的是找出哪些組件需要更新，以及如何更新（這些內(nèi)容會標(biāo)記在Fiber節(jié)點(diǎn)上）【更新過程可中斷可搶占的，高優(yōu)的更新可搶占優(yōu)先先執(zhí)行。這個階段主要是 Scheduler 負(fù)責(zé)調(diào)度優(yōu)先級, 協(xié)調(diào)器負(fù)責(zé)找出更新的內(nèi)容并標(biāo)記好】，commit 階段的作用用一句話就是【根據(jù) render 階段標(biāo)記的結(jié)果Fiber上的tag，操作dom，執(zhí)行 useEffect 以及對應(yīng)階段的生命周期函數(shù)】。

在 render 階段會執(zhí)行組件，如果出現(xiàn)高優(yōu)更新?lián)屨?，那么低?yōu)先級的更新在高優(yōu)更新執(zhí)行完成后會重新執(zhí)行一遍【函數(shù)式組件也就是個function函數(shù)，在函數(shù)體中間的執(zhí)行 ref 寫操作會被多次執(zhí)行】，我們會發(fā)現(xiàn)如果ref的賦值操作在這個期間執(zhí)行了那么組件更新的結(jié)果就是不可預(yù)期的【未被搶占時ref的結(jié)果是1，被搶占1次時是2。這完全是不可預(yù)期大的】。而 useEffect 或者回調(diào)函數(shù)都不是在 render 階段執(zhí)行的因此每次更新只執(zhí)行一次。也就是說ref的讀寫不能出現(xiàn)在render階段，就只能寫在 useEffect【類組件對應(yīng)的是生命周期函數(shù)，注意不能寫在 componentWillxxx 生命周期中，因?yàn)?componentWillxxx 生命周期函數(shù)執(zhí)行在 render 階段】和回調(diào)函數(shù)中。

// bad
function MyComponent() {
  // ...
  // ?? Don't write a ref during rendering
  myRef.current = 123;
  // ...
  // ?? Don't read a ref during rendering
  return <h1>{myOtherRef.current}</h1>;
}


// good
function MyComponent() {
  // ...
  useEffect(() => {
    // ? You can read or write refs in effects
    myRef.current = 123;
  });
  // ...
  function handleClick() {
    // ? You can read or write refs in event handlers
    doSomething(myOtherRef.current);
  }
  // ...
}

跨組件傳遞ref 獲取dom時需要借助 forwardRef 包裹組件

React 默認(rèn)情況下不允許組件訪問其他組件的dom節(jié)點(diǎn)，因此關(guān)閉了直接 props 傳遞 ref 標(biāo)記組件的dom這種操作。得借助 React.forwardRef api 傳遞 實(shí)現(xiàn)這種跨組件的dom操作。

import React, { useEffect, useRef, useState, forwardRef } from "react";

export function ParentComp() {
  const childInputRef = useRef(null);

  function handleClick() {
    childInputRef.current?.focus();
  }

  return (
    <>
      <button onClick={handleClick}>編輯</button>
      <ChildComp ref={childInputRef} />
    </>
  );
}

// 使用forwordRef 包裹組件，接受 ref 并轉(zhuǎn)發(fā)綁定到對應(yīng)dom上
const ChildComp = forwardRef((props, ref) => {
  return (
    <div>
      <input {...props} ref={ref} />
    </div>
  );
});

ref 綁定的dom在離屏或者未掛載時ref.current 值會被修改為null

ref 綁定的dom在離屏或者未掛載時ref.current 值會被修改為 null 。如果在組件中間會進(jìn)行條件渲染，那么需要處理一下判斷邏輯，不然代碼可能會拋出異常。另外在父組件引用子組件 dom 的場景也應(yīng)該增加對 null 的判斷。至此 Refs 的要點(diǎn)已經(jīng)介紹完成。

最佳實(shí)踐

接下來我們接著聊聊什么情況下使用 Refs 比較好，React 官方把 Refs 定義為逃生通道，就是暗示要謹(jǐn)慎使用。

dom 操作相關(guān)

• 如果需要進(jìn)行焦點(diǎn)管理、位置滾動等非破壞性行為以及調(diào)用 dom 節(jié)點(diǎn)的 api 那么推薦使用 Refs。
• 如果是為了修改 dom ，比如修改dom屬性，標(biāo)簽名稱等等，可能會與 React 存在沖突，不推薦這樣使用Refs 而是應(yīng)該換種思路考慮使用 state 進(jìn)行條件渲染。

用于在兩次 render 之間傳遞數(shù)據(jù)

• 如果組件中大部分功能都依賴該數(shù)據(jù)，那么不應(yīng)該存放在ref中。
• 如果數(shù)據(jù)在jsx中使用，那么不推薦放在ref中， 這會帶來問題【詳見：ref 的讀寫只能在 useEffect 或者回調(diào)函數(shù)中進(jìn)行】，推薦使用 useState。
• 想要保存數(shù)據(jù)并且不希望數(shù)據(jù)變化時引起組件 re-render， 而只是在回調(diào)函數(shù)中需要獲取到對應(yīng)內(nèi)容時，推薦使用 Ref。如 interval id 。

到此這篇關(guān)于淺談React Refs 使用場景及核心要點(diǎn)的文章就介紹到這了,更多相關(guān)React Refs 使用場景 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論