深入淺析React refs的簡介
一、是什么
Refs
在計算機(jī)中稱為彈性文件系統(tǒng)(英語:Resilient File System,簡稱ReFS)
React
中的Refs
提供了一種方式,允許我們訪問DOM
節(jié)點或在render
方法中創(chuàng)建的React
元素
本質(zhì)為ReactDOM.render()
返回的組件實例,如果是渲染組件則返回的是組件實例,如果渲染dom
則返回的是具體的dom
節(jié)點
二、如何使用
創(chuàng)建ref
的形式有三種:
- 傳入字符串,使用時通過 this.refs.傳入的字符串的格式獲取對應(yīng)的元素
- 傳入對象,對象是通過 React.createRef() 方式創(chuàng)建出來,使用時獲取到創(chuàng)建的對象中存在 current 屬性就是對應(yīng)的元素
- 傳入函數(shù),該函數(shù)會在 DOM 被掛載時進(jìn)行回調(diào),這個函數(shù)會傳入一個 元素對象,可以自己保存,使用時,直接拿到之前保存的元素對象即可
- 傳入hook,hook是通過 useRef() 方式創(chuàng)建,使用時通過生成hook對象的 current 屬性就是對應(yīng)的元素
傳入字符串
只需要在對應(yīng)元素或組件中ref
屬性
class MyComponent extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); } render() { return <div ref="myref" />; } }
訪問當(dāng)前節(jié)點的方式如下:
this.refs.myref.innerHTML = "hello";
傳入對象
refs
通過React.createRef()
創(chuàng)建,然后將ref
屬性添加到React
元素中,如下:
class MyComponent extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); } render() { return <div ref={this.myRef} />; } }
當(dāng)ref
被傳遞給render
中的元素時,對該節(jié)點的引用可以在ref
的current
屬性中訪問
const node = this.myRef.current;
傳入函數(shù)
當(dāng)ref
傳入為一個函數(shù)的時候,在渲染過程中,回調(diào)函數(shù)參數(shù)會傳入一個元素對象,然后通過實例將對象進(jìn)行保存
class MyComponent extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); } render() { return <div ref={element => this.myref = element} />; } }
獲取ref
對象只需要通過先前存儲的對象即可
const node = this.myref
傳入hook
通過useRef
創(chuàng)建一個ref
,整體使用方式與React.createRef
一致
function App(props) { const myref = useRef() return ( <> <div ref={myref}></div> </> ) }
獲取ref
屬性也是通過hook
對象的current
屬性
const node = myref.current;
上述三種情況都是ref
屬性用于原生HTML
元素上,如果ref
設(shè)置的組件為一個類組件的時候,ref
對象接收到的是組件的掛載實例
注意的是,不能在函數(shù)組件上使用ref
屬性,因為他們并沒有實例
三、應(yīng)用場景
在某些情況下,我們會通過使用refs
來更新組件,但這種方式并不推薦,更多情況我們是通過props
與state
的方式進(jìn)行去重新渲染子元素
過多使用refs
,會使組件的實例或者是DOM
結(jié)構(gòu)暴露,違反組件封裝的原則
例如,避免在Dialog
組件里暴露open()
和close()
方法,最好傳遞isOpen
屬性
但下面的場景使用refs
非常有用:
- 對Dom元素的焦點控制、內(nèi)容選擇、控制
- 對Dom元素的內(nèi)容設(shè)置及媒體播放
- 對Dom元素的操作和對組件實例的操作
- 集成第三方 DOM 庫
到此這篇關(guān)于React refs 的理解的文章就介紹到這了,更多相關(guān)React refs 的理解內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
React router cache route實現(xiàn)緩存頁面流程介紹
react-router自身沒有路由緩存的特性,在5.x版本之前,我們可以基于react-router-cache-route來實現(xiàn)路由緩存功能。但是react-router 6.x在實現(xiàn)上做了比較大的變化,react-router-cache-route沒有提供相應(yīng)的支持2023-01-01React教程之Props驗證的具體用法(Props Validation)
這篇文章主要介紹了React教程之Props驗證的具體用法(Props Validation),非常具有實用價值,需要的朋友可以參考下2017-09-09React-router中結(jié)合webpack實現(xiàn)按需加載實例
本篇文章主要介紹了React-router中結(jié)合webpack實現(xiàn)按需加載實例,非常具有實用價值,需要的朋友可以參考下2017-05-05Taro?React自定義TabBar使用useContext解決底部選中異常
這篇文章主要為大家介紹了Taro?React底部自定義TabBar使用React?useContext解決底部選中異常(需要點兩次才能選中的問題)示例詳解,有需要的朋友可以借鑒參考下2023-08-08react性能優(yōu)化useMemo與useCallback使用對比詳解
這篇文章主要為大家介紹了react性能優(yōu)化useMemo與useCallback使用對比詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08