react: 三大屬性之refs

1. 簡介

• 組件可以通過添加ref屬性來表示自己
• react會收集實例的ref信息,以ref定義的名稱為key,定義ref的節點為value,然后將這個key-value放到實例的refs屬性中
• 可以通過this.refs.refName獲取該ref對應的節點
• 不要過度使用ref

2. 字符串形式的ref

字符串形式的ref存在效率問題,可能在未來的版本中移除,不建議使用

//創建組件
class Demo extends React.Component{
	//展示左側輸入框的數據
	showData = ()=>{
		const {input1} = this.refs
                // 彈出input1對應的input輸入框中的值
		alert(input1.value)
	}
	render(){
		return(
			<div>
				<input ref="input1" type="text" placeholder="點擊按鈕提示數據"/>&nbsp;
				<button onClick={this.showData}>點我提示左側的數據</button>&nbsp;
			</div>
		)
	}
}
//渲染組件到頁面
ReactDOM.render(<Demo/>,document.getElementById('test'))

3. 回調函數形式的ref

• 回調函數的參數為當前ref所處的節點本身
• 初始化時調用一次,后面更新時都會重新調用
• 如果 ref 回調函數是以內聯函數(類似下面示例中的ref回調函數)的方式定義的，在更新過程中它會被執行兩次，第一次傳入參數null，然后第二次會傳入參數DOM元素
• 通過將 ref 的回調函數定義成 class 的綁定函數的方式可以避免上述問題,但是大多數情況下它是無關緊要的

class Demo extends React.Component{
	//展示左側輸入框的數據
	showData = ()=>{
		const {inputNpde} = this
		alert(inputNpde.value)
	}

	render(){
		return(
			<div>
				<input ref={(currentElement) => this.inputNpde = currentElement } type="text" placeholder="點擊按鈕提示數據"/>&nbsp;
				<button onClick={this.showData}>點我提示左側的數據</button>&nbsp;
			</div>
		)
	}
}
//渲染組件到頁面
ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))

4. createRef

• React.createRef調用后可以返回一個容器，該容器可以存儲被ref所標識的節點,該容器是“專人專用”的
• react解析到節點的ref的值為React.createRef()創建的容器時,react將該節點存儲到對應的容器中
• 通過refName.current獲取對應的節點

class Demo extends React.Component{
			myRef = React.createRef()
			//展示左側輸入框的數據
			showData = ()=>{
				alert(this.myRef.current.value);
			}	
			render(){
				return(
					<div>
						<input ref={this.myRef} type="text" placeholder="點擊按鈕提示數據"/>&nbsp;
						<button onClick={this.showData}>點我提示左側的數據</button>&nbsp;
					</div>
				)
			}
		}
		//渲染組件到頁面
		ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))