（五）React的三大特性 refs

簡介：

使用refs 元件內的標籤可以定義ref屬性來標識自己
such as： 注意在使用的是 this.refs refs

1.字串形式的refs使用

（不推薦使用 原因就是存在一些效率的問題 我覺得就是收集獲取的時候存在問題吧）

案例的作用 點選按鈕獲取相關節點的資料 另一個是失去焦點的時候獲取節點的資料

        //建立元件
        class Demo extends React.Component{
            //展示左側輸入框的資料
            showData = ()=>{
                const {input1} = this.refs
                alert(input1.value)
            }
            //展示右側輸入框的資料
            showData2 = ()=>{
                const {input2} = this.refs
                alert(input2.value)
            }
            render(){
                return(
                    <div>
                        <input ref="input1" type="text" placeholder="點選按鈕提示資料"/>&nbsp;
                        <button onClick={this.showData}>點我提示左側的資料</button>&nbsp;
                        <input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦點提示資料"/>
                    </div>
                )
            }
        }
        //渲染元件到頁面
        ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))

 

2.回撥形式的refs使用

    把ref當前所處的節點掛在了例項自身上並且取了個名字叫input1
    這個ref就是獲取當前的這個節點

//建立元件
        class Demo extends React.Component{
            //展示左側輸入框的資料
            showData = ()=>{
                const {input1} = this
                alert(input1.value)
            }
            //展示右側輸入框的資料
            showData2 = ()=>{
                const {input2} = this
                alert(input2.value)
            }
            render(){
                return(
                    <div>
                     	//把ref當前所處的節點掛在了例項自身上並且取了個名字叫input1
                        <input ref={c => this.input1 = c } type="text" placeholder="點選按鈕提示資料"/>&nbsp;
                        <button onClick={this.showData}>點我提示左側的資料</button>&nbsp;
                        <input onBlur={this.showData2} ref={c => this.input2 = c } type="text" placeholder="失去焦點提示資料"/>&nbsp;
                    </div>
                )
            }
        }
        //渲染元件到頁面
        ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
 

使用行內函數的方式 ，更新的時候會出發兩次 ，原因是因為之前的行內函數清空了 要重新載入
解決方法就是，不使用行內函數的方式 ，要使用class連接回調的形式
舉例子：

//建立元件
		class Demo extends React.Component{

			state = {isHot:false}

			showInfo = ()=>{
				const {input1} = this
				alert(input1.value)
			}

			changeWeather = ()=>{
				//獲取原來的狀態
				const {isHot} = this.state
				//更新狀態
				this.setState({isHot:!isHot})
			}

			saveInput = (c)=>{
				this.input1 = c;
				console.log('@',c);
			}

			render(){
				const {isHot} = this.state
				return(
					<div>
						<h2>今天天氣很{isHot ? '炎熱':'涼爽'}</h2>
						{/*<input ref={(c)=>{this.input1 = c;console.log('@',c);}} type="text"/><br/><br/>*/}
						<input ref={this.saveInput} type="text"/><br/><br/>
						<button onClick={this.showInfo}>點我提示輸入的資料</button>
						<button onClick={this.changeWeather}>點我切換天氣</button>
					</div>
				)
			}
		}
		//渲染元件到頁面
		ReactDOM.render(<Demo/>,document.getElementById('test'))
 

3.createRef的方式：應該就是建立一個節點進行繫結：

簡介： 呼叫後可以返回一個容器 該容器可以儲存被ref所標識的節點
這個是專人專用的 要是你每次都新增索引在每個元素上 然後使用的時候要每次都建立 createRef()

//建立元件
        class Demo extends React.Component{
            /* 
                React.createRef呼叫後可以返回一個容器，該容器可以儲存被ref所標識的節點,該容器是“專人專用”的
             */
            myRef = React.createRef()
            myRef2 = React.createRef()
            //展示左側輸入框的資料
            showData = ()=>{
                alert(this.myRef.current.value);
            }
            //展示右側輸入框的資料
            showData2 = ()=>{
                alert(this.myRef2.current.value);
            }
            render(){
                return(
                    <div>
                        <input ref={this.myRef} type="text" placeholder="點選按鈕提示資料"/>&nbsp;
                        <button onClick={this.showData}>點我提示左側的資料</button>&nbsp;
                        <input onBlur={this.showData2} ref={this.myRef2} type="text" placeholder="失去焦點提示資料"/>&nbsp;
                    </div>
                )
            }
        }
        //渲染元件到頁面
        ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))

總結： 字串是最簡單的 ， 然後就是回撥函式的這種形式的， 又是行內函數的形式， 通過引數取值進行相應的繫結，但是有個問題就是內聯形式的方式有問題會觸發兩次，解決方案就是要改成class的繫結形式，也就是類繫結的形式進行解決，但是呼叫兩次無關緊要大多數情況下是沒有什麼事情的 。最後就是進行createRef的形式 是一個新的API的形式。需要進行每個的新建飯後進行索引 而且是專一使用的。