React三大屬性之Refs的使用詳解
refs是React中用來取得某個JSX組件或者某個DOM中的一些狀態(tài)值的時候,用來獲取節(jié)點的方法。在React官方的解釋中,它的適用范圍如下:
- 管理焦點,文本選擇或媒體播放。
- 觸發(fā)強制動畫。
- 集成第三方 DOM 庫。
React文檔中再三強調(diào),請不要過度使用refs,所以當(dāng)我們可以用dom原生對象解決時,盡量不要使用refs 依照之前的寫法,首先是給出類組件和函數(shù)組件中refs的寫法
類組件
在類中,refs有三種方式,目前最常用的是回調(diào)的形式使用,分別進(jìn)行演示
//直接定義refs,已廢棄 class App extends React.PureComponent{ changeInput = ()=>{ const {input} = this.refs } render() { return ( <div> <input type="text" placeholder={"please input your value"} onBlur={this.changeInput} ref={"input"}/> </div> ) } } //用回調(diào)的形式使用 class App extends React.PureComponent{ changeInput = ()=>{ console.log(this.inputRef); } render() { return ( <div> <input type="text" placeholder={"please input your value"} onBlur={this.changeInput} ref={(el)=>{this.inputRef = el}}/> </div> ) } } //用createRef class App extends React.PureComponent{ inputRef = React.createRef() changeInput = ()=>{ console.log(this.inputRef.current); } render() { return ( <div> <input type="text" placeholder={"please input your value"} onBlur={this.changeInput} ref={this.inputRef}/> </div> ) } }
以上就是類組件的三種Ref的寫法
函數(shù)組件
function App(){ const inputRef = useRef("") return ( <div> <input type="text" placeholder={"please input your value"} ref={inputRef}/> </div> ) }
用一個useRef直接就完成了代碼
面試常問:React中的refs作用是什么?
Refs 是 React 提供給我們的安全訪問 DOM 元素或者某個組件實例的句柄。在類組件中,React將ref屬性中第一個參數(shù)作為DOM中的句柄。而函數(shù)組件中,react用hooks的api useRef也能獲得ref(在hooks中也常常用useRef的特性即不隨著組件刷新而刷新存儲的數(shù)據(jù)從而寫一些不變的量)
以上就是React三大屬性之Refs的使用詳解的詳細(xì)內(nèi)容,更多關(guān)于React三大屬性之Refs的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
解決React報錯Parameter 'props' implicitly&nb
這篇文章主要為大家介紹了React報錯Parameter 'props' implicitly has an 'any' type的解決處理方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12淺談react-router HashRouter和BrowserRouter的使用
本篇文章主要介紹了淺談react-router HashRouter和BrowserRouter的使用,具有一定的參考價值,有興趣的可以了解一下2017-12-12React+valtio響應(yīng)式狀態(tài)管理
Valtio是一個很輕量級的響應(yīng)式狀態(tài)管理庫,使用外部狀態(tài)代理去驅(qū)動React視圖來更新,本文主要介紹了React+valtio響應(yīng)式狀態(tài)管理,感興趣的可以了解一下2023-12-12