快捷導(dǎo)航

React?Hooks中?useRef和useImperativeHandle的使用方式

更新時間：2023年10月18日 15:28:51 作者：學(xué)全棧的灌湯包

這篇文章主要介紹了React?Hooks中?useRef和useImperativeHandle的使用方式,文中說明了useRef和useCallback一起使用,?可以解決閉包陷阱的問題,本文結(jié)合實例代碼介紹的非常詳細(xì),需要的朋友可以參考下

useRef的解析

useRef返回一個ref對象，返回的ref對象在組件的整個生命周期保持不變。

最常用的ref是兩種用法:

用法一: 用來獲取DOM(或者組件，但是需要是class組件)元素, 操作DOM;

import React, { memo, useRef } from 'react'
const App = memo(() => {
  const inputRef = useRef()
  function inputDom() {
    inputRef.current.focus()
  }
  return (
    <div>
      <input type="text" ref={inputRef}/>
      <button onClick={inputDom}>獲取焦點(diǎn)</button>
    </div>
  )
})
export default App

用法二: 保存一個數(shù)據(jù)，這個對象在整個生命周期中可以保存不變;

例如下面代碼, 在我們修改counter時, App組件會重新渲染, 那么info對象也會重新在堆內(nèi)存中開辟一個新的內(nèi)存空間; 意味著我們每修改一次counter, 拿到是一個新的info對象

import React, { memo, useState, useRef } from 'react'
const App = memo(() => {
  const [counter, setCounter] = useState(10)
  function increment() {
    setCounter(counter + 1)
  }
  // 定義一個對象
  const info = {}
  return (
    <div>
      <h2>當(dāng)前計數(shù): {counter}</h2>
      <button onClick={increment}>+1</button>
    </div>
  )
})
export default App

我們可以使用useRef, 因為useRef不管渲染多少次, 返回的都是同一個ref對象

import React, { memo, useState, useRef } from 'react'
const App = memo(() => {
  const [counter, setCounter] = useState(10)
  function increment() {
    setCounter(counter + 1)
  }
  // 定義一個對象
  const infoRef = useRef()
  return (
    <div>
      <h2>{infoRef.current.name}-{infoRef.current.age}</h2>
      <h2>當(dāng)前計數(shù): {counter}</h2>
      <button onClick={increment}>+1</button>
    </div>
  )
})
export default App

useRef和useCallback一起使用, 可以解決閉包陷阱的問題, 在上一篇文章中有對應(yīng)的案例

useImperativeHandle

useImperativeHandle并不是特別好理解, 有點(diǎn)抽象，我們一點(diǎn)點(diǎn)來學(xué)習(xí)。

我們先來回顧一下ref和forwardRef結(jié)合使用:

通過forwardRef可以將ref轉(zhuǎn)發(fā)到子組件;

子組件拿到父組件中創(chuàng)建的ref，綁定到自己的某一個元素中;

父組件中就可以獲取到子組件中綁定了ref的元素

import React, { memo, useRef,forwardRef } from 'react'
const HelloWorld = memo(forwardRef((props, ref) => {
  return (
    <input type="text" ref={ref} />
  )
}))
const App = memo(() => {
  const inputRef = useRef()
  function getInputDom() {
    // 獲取到子組件中的input元素
    console.log(inputRef.current)
    // 操作DOM
    inputRef.current.focus()
  }
  return (
    <div>
      <HelloWorld ref={inputRef}/>
      <button onClick={getInputDom}>子組件input獲取焦點(diǎn)</button>
    </div>
  )
})
export default App

forwardRef的做法本身沒有什么問題，但是我們是將子組件的DOM直接暴露給了父組件:

直接暴露給父組件帶來的問題是某些情況的不可控;

父組件可以拿到DOM后進(jìn)行任意的操作;

但是，事實上在上面的案例中，我們只是希望父組件可以操作的focus，其他并不希望它隨意操作

例如修改元素內(nèi)容的操作inputRef.current.value = "aaa"等等, 我們希望可以限制它的操作;

通過useImperativeHandle可以值暴露固定的操作(對操作進(jìn)行限制):

useImperativeHandle要求傳入兩個參數(shù):

參數(shù)一: 傳入一個ref
參數(shù)二: 傳入一個回調(diào)函數(shù), 要求該回調(diào)函數(shù)返回一個對象, 該對象會綁定到傳入的ref的current屬性中

通過useImperativeHandle的Hook，將傳入的ref和useImperativeHandle第二個參數(shù)返回的對象綁定到了一起; 所以在父組件中，使用 inputRef.current時，實際上使用的是參數(shù)二返回的對象;

例如下面代碼中, 在子組件通過useImperativeHandle暴露一個方法focus

const HelloWorld = memo(forwardRef((props, ref) => {
  // 通過useImperativeHandle在子組件對父組件傳入的ref進(jìn)行處理
  useImperativeHandle(ref, () => {
    return {
      focus() {
        console.log("focus調(diào)用")
      }
    }
  })

  return (
    <input type="text" ref={ref} />
  )
}))

那么在App父組件中本質(zhì)上就是在調(diào)用參數(shù)二返回的對象

const App = memo(() => {
  const inputRef = useRef()
  function getInputDom() {
    // 獲取到的也是參數(shù)二返回值的那個對象
    console.log(inputRef.current)
    // 本質(zhì)上調(diào)用的是參數(shù)二返回的對象中的focus方法
    inputRef.current.focus()
  }
  return (
    <div>
      <HelloWorld ref={inputRef}/>
      <button onClick={getInputDom}>子組件input獲取焦點(diǎn)</button>
    </div>
  )
})

但是我們并不是想像上面代碼中那樣簡單的打印一句話, 而是想真正的獲取到焦點(diǎn)

那么我們就可以在子組件的內(nèi)部, 在重新定義一個ref對象, 再將想要暴露的操作暴露出去即可

例如下面代碼中我們只暴露獲取焦點(diǎn)的操作, 這樣就會變得更安全, 更可控; 我們想要在外部使用什么功能完全由內(nèi)部的子組件決定

import React, { memo, useRef,forwardRef, useImperativeHandle } from 'react'
const HelloWorld = memo(forwardRef((props, ref) => {
  // 在子組件內(nèi)部重新定義一個ref對象
  const inputRef = useRef()
  // 通過useImperativeHandle在子組件對父組件傳入的ref進(jìn)行處理
  useImperativeHandle(ref, () => {
    return {
      focus() {
        inputRef.current.focus()
      }
    }
  })
  return (
    // 將組件內(nèi)部定義的ref對象綁定到表單中
    <input type="text" ref={inputRef} />
  )
}))
const App = memo(() => {
  const inputRef = useRef()
  function getInputDom() {
    console.log(inputRef.current)
    // 本質(zhì)上調(diào)用的是參數(shù)二返回的對象
    inputRef.current.focus()
  }
  return (
    <div>
      <HelloWorld ref={inputRef}/>
      <button onClick={getInputDom}>子組件input獲取焦點(diǎn)</button>
    </div>
  )
})
export default App

到此這篇關(guān)于React Hooks - useRef和useImperativeHandle的使用方式的文章就介紹到這了,更多相關(guān)React useRef和useImperativeHandle使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: