React?Hooks中?useRef和useImperativeHandle的使用方式
useRef的解析
useRef返回一個(gè)ref對(duì)象,返回的ref對(duì)象在組件的整個(gè)生命周期保持不變。
最常用的ref是兩種用法:
用法一: 用來(lái)獲取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
用法二: 保存一個(gè)數(shù)據(jù),這個(gè)對(duì)象在整個(gè)生命周期中可以保存不變;
例如下面代碼, 在我們修改counter時(shí), App組件會(huì)重新渲染, 那么info對(duì)象也會(huì)重新在堆內(nèi)存中開(kāi)辟一個(gè)新的內(nèi)存空間; 意味著我們每修改一次counter, 拿到是一個(gè)新的info對(duì)象
import React, { memo, useState, useRef } from 'react' const App = memo(() => { const [counter, setCounter] = useState(10) function increment() { setCounter(counter + 1) } // 定義一個(gè)對(duì)象 const info = {} return ( <div> <h2>當(dāng)前計(jì)數(shù): {counter}</h2> <button onClick={increment}>+1</button> </div> ) }) export default App
我們可以使用useRef, 因?yàn)閡seRef不管渲染多少次, 返回的都是同一個(gè)ref對(duì)象
import React, { memo, useState, useRef } from 'react' const App = memo(() => { const [counter, setCounter] = useState(10) function increment() { setCounter(counter + 1) } // 定義一個(gè)對(duì)象 const infoRef = useRef() return ( <div> <h2>{infoRef.current.name}-{infoRef.current.age}</h2> <h2>當(dāng)前計(jì)數(shù): {counter}</h2> <button onClick={increment}>+1</button> </div> ) }) export default App
useRef和useCallback一起使用, 可以解決閉包陷阱
的問(wèn)題, 在上一篇文章中有對(duì)應(yīng)的案例
useImperativeHandle
useImperativeHandle并不是特別好理解, 有點(diǎn)抽象,我們一點(diǎn)點(diǎn)來(lái)學(xué)習(xí)。
我們先來(lái)回顧一下ref和forwardRef結(jié)合使用:
通過(guò)forwardRef可以將ref轉(zhuǎn)發(fā)到子組件;
子組件拿到父組件中創(chuàng)建的ref,綁定到自己的某一個(gè)元素中;
父組件中就可以獲取到子組件中綁定了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的做法本身沒(méi)有什么問(wèn)題,但是我們是將子組件的DOM直接暴露給了父組件:
直接暴露給父組件帶來(lái)的問(wèn)題是某些情況的不可控;
父組件可以拿到DOM后進(jìn)行任意的操作;
但是,事實(shí)上在上面的案例中,我們只是希望父組件可以操作的focus,其他并不希望它隨意操作
例如修改元素內(nèi)容的操作
inputRef.current.value = "aaa"
等等, 我們希望可以限制它的操作;
通過(guò)useImperativeHandle可以值暴露固定的操作(對(duì)操作進(jìn)行限制):
useImperativeHandle要求傳入兩個(gè)參數(shù):
- 參數(shù)一: 傳入一個(gè)ref
- 參數(shù)二: 傳入一個(gè)回調(diào)函數(shù), 要求該回調(diào)函數(shù)返回一個(gè)對(duì)象, 該對(duì)象會(huì)綁定到傳入的ref的current屬性中
通過(guò)useImperativeHandle的Hook,將傳入的ref和useImperativeHandle第二個(gè)參數(shù)返回的對(duì)象綁定到了一起; 所以在父組件中,使用 inputRef.current時(shí),實(shí)際上使用的是參數(shù)二返回的對(duì)象;
例如下面代碼中, 在子組件通過(guò)useImperativeHandle暴露一個(gè)方法focus
const HelloWorld = memo(forwardRef((props, ref) => { // 通過(guò)useImperativeHandle在子組件對(duì)父組件傳入的ref進(jìn)行處理 useImperativeHandle(ref, () => { return { focus() { console.log("focus調(diào)用") } } }) return ( <input type="text" ref={ref} /> ) }))
那么在App父組件中本質(zhì)上就是在調(diào)用參數(shù)二返回的對(duì)象
const App = memo(() => { const inputRef = useRef() function getInputDom() { // 獲取到的也是參數(shù)二返回值的那個(gè)對(duì)象 console.log(inputRef.current) // 本質(zhì)上調(diào)用的是參數(shù)二返回的對(duì)象中的focus方法 inputRef.current.focus() } return ( <div> <HelloWorld ref={inputRef}/> <button onClick={getInputDom}>子組件input獲取焦點(diǎn)</button> </div> ) })
但是我們并不是想像上面代碼中那樣簡(jiǎn)單的打印一句話, 而是想真正的獲取到焦點(diǎn)
那么我們就可以在子組件的內(nèi)部, 在重新定義一個(gè)ref對(duì)象, 再將想要暴露的操作暴露出去即可
例如下面代碼中我們只暴露獲取焦點(diǎn)的操作, 這樣就會(huì)變得更安全, 更可控; 我們想要在外部使用什么功能完全由內(nèi)部的子組件決定
import React, { memo, useRef,forwardRef, useImperativeHandle } from 'react' const HelloWorld = memo(forwardRef((props, ref) => { // 在子組件內(nèi)部重新定義一個(gè)ref對(duì)象 const inputRef = useRef() // 通過(guò)useImperativeHandle在子組件對(duì)父組件傳入的ref進(jìn)行處理 useImperativeHandle(ref, () => { return { focus() { inputRef.current.focus() } } }) return ( // 將組件內(nèi)部定義的ref對(duì)象綁定到表單中 <input type="text" ref={inputRef} /> ) })) const App = memo(() => { const inputRef = useRef() function getInputDom() { console.log(inputRef.current) // 本質(zhì)上調(diào)用的是參數(shù)二返回的對(duì)象 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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- React中useRef hook的簡(jiǎn)單用法
- React?Hooks的useState、useRef使用小結(jié)
- react如何利用useRef、forwardRef、useImperativeHandle獲取并處理dom
- React Hooks之useRef獲取元素示例詳解
- react中useRef的應(yīng)用使用詳解
- 重新理解?React?useRef原理
- 教你react中如何理解usestate、useEffect副作用、useRef標(biāo)識(shí)和useContext
- React中useRef的具體使用
- React組件設(shè)計(jì)過(guò)程之仿抖音訂單組件
- react如何使用useRef模仿抖音標(biāo)題里面添加標(biāo)簽內(nèi)容
相關(guān)文章
react實(shí)現(xiàn)點(diǎn)擊選中的li高亮的示例代碼
本篇文章主要介紹了react實(shí)現(xiàn)選中的li高亮的示例代碼,頁(yè)面上有很多個(gè)li,要實(shí)現(xiàn)點(diǎn)擊到哪個(gè)就哪個(gè)高亮。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05React官方團(tuán)隊(duì)完善原生Hook閉包陷阱
這篇文章主要為大家介紹了React官方團(tuán)隊(duì)出手,補(bǔ)齊原生Hook短板閉包陷阱的示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07詳解使用WebPack搭建React開(kāi)發(fā)環(huán)境
這篇文章主要介紹了詳解使用WebPack搭建React開(kāi)發(fā)環(huán)境,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08react ant Design手動(dòng)設(shè)置表單的值操作
這篇文章主要介紹了react ant Design手動(dòng)設(shè)置表單的值操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10工程級(jí)?React?注冊(cè)登錄全棧級(jí)流程分析
這篇文章主要介紹了工程級(jí)?React?注冊(cè)登錄全棧級(jí)流程,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-02-02原生+React實(shí)現(xiàn)懶加載(無(wú)限滾動(dòng))列表方式
這篇文章主要介紹了原生+React實(shí)現(xiàn)懶加載(無(wú)限滾動(dòng))列表方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03