refs是React中用來取得某個(gè)JSX組件或者某個(gè)DOM中的一些狀態(tài)值的時(shí)候，用來獲取節(jié)點(diǎn)的方法。在React官方的解釋中，它的適用范圍如下：
- 管理焦點(diǎn)，文本選擇或媒體播放。
- 觸發(fā)強(qiáng)制動(dòng)畫。
- 集成第三方 DOM 庫(kù)。
React文檔中再三強(qiáng)調(diào)，請(qǐng)不要過度使用refs，所以當(dāng)我們可以用dom原生對(duì)象解決時(shí)，盡量不要使用refs 依照之前的寫法，首先是給出類組件和函數(shù)組件中refs的寫法
類組件
在類中，refs有三種方式，目前最常用的是回調(diào)的形式使用,分別進(jìn)行演示
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
//直接定義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> ) }}//用createRefclass 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ù)組件
|
1
2
3
4
5
6
7
8
|
function App(){ const inputRef = useRef("") return ( <div> <input type="text" placeholder={"please input your value"} ref={inputRef}/> </div> )} |
用一個(gè)useRef直接就完成了代碼
面試常問：React中的refs作用是什么？
Refs 是 React 提供給我們的安全訪問 DOM 元素或者某個(gè)組件實(shí)例的句柄。在類組件中，React將ref屬性中第一個(gè)參數(shù)作為DOM中的句柄。而函數(shù)組件中,react用hooks的api useRef也能獲得ref(在hooks中也常常用useRef的特性即不隨著組件刷新而刷新存儲(chǔ)的數(shù)據(jù)從而寫一些不變的量)
以上就是React三大屬性之Refs的使用詳解的詳細(xì)內(nèi)容，更多關(guān)于React三大屬性之Refs的資料請(qǐng)關(guān)注服務(wù)器之家其它相關(guān)文章！
原文鏈接：https://juejin.cn/post/6950943650050392094
