描述

????React 官網(wǎng)對(duì) useRef 的描述原文

????useRef is a React Hook that lets you reference a value that’s not needed for rendering.

useRef 是一個(gè) React Hook 可以讓你引用到一個(gè)不需要渲染的值.

? ??? useRef?是一個(gè)不太常用的 hook, React 認(rèn)為 useRef 是一個(gè)應(yīng)急方案(escape hatch), 與 useState 很類似, 都是維護(hù)一個(gè) hook 變量, 區(qū)別在與 useState 維護(hù)的變量是用做視圖更新, 而 useRef 是維護(hù)了一個(gè)普通的 JS 容器變量.

場(chǎng)景

? ? 使用 useRef 的場(chǎng)景, 一般是需要與外部 API 通信的時(shí)候, 而且這些 API 大多不會(huì)影響到組件外觀,?如果你的組件需要存儲(chǔ)一些值, 但不會(huì)影響渲染邏輯,?請(qǐng)選擇 ref, React 官方列舉了一些出現(xiàn)頻率較高的情況:

• 存儲(chǔ) timeout ID

• 存儲(chǔ)和操作 DOM 元素

• 存儲(chǔ)不需要被用來(lái)計(jì)算 JSX 的其他對(duì)象

????接口定義:

參數(shù)? ? ? ? ? ?

• initialValue: any

  useRef 返回的 Ref 對(duì)象的 current 屬性的初始值, 可以是任意類型, 只有在組件首次渲染時(shí)才會(huì)有效, 后續(xù)渲染會(huì)使用緩存中的對(duì)象引用.

返回

• Ref: { current: T?}

  返回一個(gè)對(duì)象引用,?current 初始值是傳入的?initialValue 之所以是一個(gè)對(duì)象, 因?yàn)?React?必須維護(hù)到一個(gè)對(duì)象引用,?才能保證你獲取的是同一個(gè)對(duì)象, 而且還可以滿足一個(gè)任意類型的業(yè)務(wù)數(shù)據(jù), 所以這個(gè)格式是必須的, 作為調(diào)用者只能操作 Ref.current 屬性, 如果你將 ref 對(duì)象作為一個(gè) JSX 節(jié)點(diǎn)的 ref 屬性傳給 React , 那么 React 會(huì)把 current 屬性賦值為一個(gè) DOM 對(duì)象.

用法1

????使用 useRef 引用一個(gè)值, 在后續(xù)渲染中, useRef 會(huì)返回相同的對(duì)象, 這個(gè)對(duì)象上有一個(gè) current 屬性, 用來(lái)存儲(chǔ)數(shù)據(jù), 修改 current 并不會(huì)導(dǎo)致重新渲染.

? ? 你可以在后續(xù)的操作中讀取這個(gè)對(duì)象, 但請(qǐng)不要在渲染期間讀取, 如果一定要在渲染期間寫入讀取, 請(qǐng)使用 state 代替, 因?yàn)?state 至少是可預(yù)測(cè)的, 如果使用不恰當(dāng) React 會(huì)做出提示.

用法2

????避免重復(fù)計(jì)算 ref 初始值, 雖然 useRef 的初始值只在初次渲染時(shí)使用, 但是如果是像下面這樣通過(guò)調(diào)用函數(shù)返回的結(jié)果, 那么在后續(xù)渲染中, 雖然結(jié)果會(huì)被丟棄, 但是函數(shù)依然會(huì)被調(diào)用, 這可能會(huì)造成浪費(fèi).

????雖然在渲染期間不允許讀取和寫入 ref.current, 但是在下面這種情況下是可以的, 因?yàn)檫@樣實(shí)際的效果也只會(huì)在首次執(zhí)行, 是可預(yù)測(cè)的, 并且避免了初始化方法 getTestRef 的調(diào)用浪費(fèi).

用法3

????通過(guò) ref 操作 DOM, 這是 useRef 使用最多的一種用法, 首先聲明一個(gè)初始值為 null 的 ref 對(duì)象, 然后將 ref 對(duì)象通過(guò) ref 屬性傳遞給想要操作的 DOM 節(jié)點(diǎn)的 JSX.

????當(dāng) React 創(chuàng)建 DOM 并渲染時(shí), 會(huì)將 DOM 節(jié)點(diǎn)賦值給傳入的 ref 對(duì)象的 current 屬性, 當(dāng) DOM 節(jié)點(diǎn)被移除時(shí), React 會(huì)把 current 的值設(shè)置成 null.

用法4

? ? 獲取自定義組件的 ref, 如果你直接在自定義組件上增加 ref 屬性, 會(huì)得到一個(gè)錯(cuò)誤??

????這是 React 故意的, Refs 是緊急方案, 應(yīng)該謹(jǐn)慎使用,?直接暴露 DOM 節(jié)點(diǎn)信息會(huì)讓代碼變的脆弱, 因此當(dāng)父組件想要獲取子組件的 DOM?時(shí), 必須子組件同意并通過(guò)?forwardRef?暴露出指定 DOM 節(jié)點(diǎn)給外界.?

?? ? 上面例子中 Children 通過(guò)?forwardRef 暴露了一個(gè) input 元素, 父元素 MyApp 可以調(diào)用到 input.focus 方法, 同時(shí)父組件也能做其他的事情, 比如刪除插入元素等一些子組件不希望產(chǎn)生但無(wú)法阻止的事情, 這個(gè)時(shí)候, 可以使用?useImperativeHandle 限制父組件獲取到的 ref 對(duì)象.

? ? 使用了?useImperativeHandle 之后, 父組件的 ref 獲取到的就不再是子組件的 DOM, 而是一個(gè)子組件指定的 JS 對(duì)象, 這樣對(duì)子組件來(lái)說(shuō)就保證了安全.

總結(jié)

• useRef?是一個(gè)應(yīng)急方案, 大多數(shù)時(shí)候不應(yīng)該是首選, 與 useState 類似都是存儲(chǔ)一個(gè)變量, 區(qū)別在于 useRef 的返回值不會(huì)引起重新渲染;

• useRef 接收一個(gè)任意類型的參數(shù), 只有在首次渲染有用, 后續(xù)渲染會(huì)丟棄, 返回一個(gè)含有 current 字段的對(duì)象, 默認(rèn)值是傳入 useRef 的參數(shù),?current 的值可變, 但是不應(yīng)該在渲染過(guò)程中讀取和寫入;

• 渲染過(guò)程中可以使用?testRef.current === null 判斷來(lái)限制修改 ref.current, 這種操作是允許的;

• 通過(guò) JSX 節(jié)點(diǎn)上的 ref 屬性, 可以讓 React 將 DOM 賦值給 ref.current, 但是不能在子組件上直接使用;

• 要獲取子組件 DOM 需要通過(guò) forwardRef 方法包裝子組件, 并報(bào)漏一個(gè) DOM 節(jié)點(diǎn)給父組件.

• 如果子組件不想報(bào)漏 DOM 節(jié)點(diǎn), 那么可以使用 useImperativeHandle 來(lái)指定傳遞一個(gè)任意值給父組件的 ref 接收.