1.React中refs屬性
綁定到render輸出的任何組件上，通過this.ref.綁定名直接操作DOM元素或獲取子組件的實例。
2.綁定refs實例
2.1 字符串refs(已經過時參考官網API)
字符串(string)的ref存在一定的效率問題
<input ref='input1' type="text" placeholeder='點擊按鈕提示數據'/><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Hello，React</title>
</head><body><!-- 容器 --><div id="test"></div><!-- {/* // 引入 React核心庫 */} --><script src="https://unpkg.com/react@16/umd/react.production.min.js"></script><!-- {/* // 引入 react-dom 用于支持 react 操作 DOM */} --><script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script><!-- {/* // 引入 babel：1. ES6 ==> ES5 2. jsx ==> js */} --><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><!-- {/* // 引入 JSX 語法 */} --><script type="text/babel">// 1.創建組件class MyComponent extends React.Component {render() {return (<div><input ref='input1' type="text" placeholeder='點擊按鈕提示數據'/> <button ref='button1' onClick={this.showData}>點擊提示左側數據</button> <input ref='input2' onBlur={this.showData2} type="text" placeholeder='失去焦點提示數據'/></div>)}// 左側事件處理函數 ref標識使用showData = () => {console.log(this);alert(this.refs.input1.value);}// 右側事件處理函數 失去焦點觸發showData2 = () => {alert(this.refs.input2.value);}}// 2. 渲染虛擬DOM到頁面ReactDOM.render(<MyComponent />,document.getElementById('test'))</script>
</body></html>2.2 回調形式refs
<input ref={c => this.input1 = c} type="text" placeholeder='點擊按鈕提示數據'/>整體代碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Hello，React</title>
</head><body><!-- 容器 --><div id="test"></div><!-- {/* // 引入 React核心庫 */} --><script src="https://unpkg.com/react@16/umd/react.production.min.js"></script><!-- {/* // 引入 react-dom 用于支持 react 操作 DOM */} --><script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script><!-- {/* // 引入 babel：1. ES6 ==> ES5 2. jsx ==> js */} --><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><!-- {/* // 引入 JSX 語法 */} --><script type="text/babel">// 1.創建組件class MyComponent extends React.Component {// 回調函數 形式的ref標識使用render() {return (<div><input ref={c => this.input1 = c} type="text" placeholeder='點擊按鈕提示數據'/> <button onClick={this.showData}>點擊提示左側數據</button> <input ref={c => this.input2 = c} onBlur={this.showData2} type="text" placeholeder='失去焦點提示數據'/></div>)}// 左側事件處理函數 ref標識使用showData = () => {const {input1} =thisalert(input1.value);}// 右側事件處理函數 失去焦點觸發showData2 = () => {const {input2} =thisalert(input2.value);}}// 2. 渲染虛擬DOM到頁面ReactDOM.render(<MyComponent />,document.getElementById('test'))</script>
</body></html>2.2.1?回調函數refs以內聯方式定義，更新過程中會執行兩次
????????ref回調函數如果以內聯函數的方式定義，在更新的過程中會執行兩次，第一次傳入null，第二次傳入參數DOM元素，每次渲染時會創建新的函數實例，所以React清空舊的的ref并設置新的。影響幾乎不存在
?整體代碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Hello，React</title>
</head><body><!-- 容器 --><div id="test"></div><!-- {/* // 引入 React核心庫 */} --><script src="https://unpkg.com/react@16/umd/react.production.min.js"></script><!-- {/* // 引入 react-dom 用于支持 react 操作 DOM */} --><script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script><!-- {/* // 引入 babel：1. ES6 ==> ES5 2. jsx ==> js */} --><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><!-- {/* // 引入 JSX 語法 */} --><script type="text/babel">// 1.創建組件class MyComponent extends React.Component {state = {isHot:true}// 事件處理函數 ref標識使用showData = () => {const {input1} =thisalert(input1.value);}// 回調函數 形式的ref標識使用render() {const {isHot} = this.statereturn (<div><h2>{isHot?'很熱':'很冷'}</h2><button onClick={()=>this.setState({isHot:!isHot})}>點擊切換天氣</button> <input ref={c => {this.input1 = c;console.log('渲染次數：',c)}} type="text" placeholeder='點擊按鈕提示數據'/> <button onClick={this.showData}>點擊提示左側數據</button> </div>)}}// 2. 渲染虛擬DOM到頁面ReactDOM.render(<MyComponent />,document.getElementById('test'))</script>
</body></html>2.3 React.createRef()?容器存儲ref所標識的節點
2.3.1 聲明調用
// 調用后返回容器(聲明唯一標識使用)，容器存儲ref所標識的節點myRef = React.createRef() showData = () => {console.log(this.myRef.current.value);alert(this.myRef.current.value);}2.3.2 對應節點綁定?
<input ref={this.myRef} type="text" placeholeder='點擊按鈕提示數據'/> 2.3.3 整體代碼?
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Hello，React</title>
</head><body><!-- 容器 --><div id="test"></div><!-- {/* // 引入 React核心庫 */} --><script src="https://unpkg.com/react@16/umd/react.production.min.js"></script><!-- {/* // 引入 react-dom 用于支持 react 操作 DOM */} --><script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script><!-- {/* // 引入 babel：1. ES6 ==> ES5 2. jsx ==> js */} --><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><!-- {/* // 引入 JSX 語法 */} --><script type="text/babel">// 1.創建組件class MyComponent extends React.Component {// 調用后返回容器(聲明唯一標識使用)，容器存儲ref所標識的節點myRef = React.createRef()myRef2 = React.createRef()// 事件處理函數showData = () => {console.log(this.myRef.current.value);alert(this.myRef.current.value);}// 失去焦點處理函數showData2 = () => {console.log(this.myRef.current.value);alert(this.myRef.current.value);}render() {return (<div><input ref={this.myRef} type="text" placeholeder='點擊按鈕提示數據'/> <button onClick={this.showData}>點擊</button> <input ref={this.myRef2} onBlur={this.showData2} type="text" placeholeder='點擊按鈕提示數據'/> </div>)}}// 2. 渲染虛擬DOM到頁面ReactDOM.render(<MyComponent />,document.getElementById('test'))</script>
</body></html>
![C++Cherno 學習筆記day17 [66]-[70] 類型雙關、聯合體、虛析構函數、類型轉換、條件與操作斷點](http://pic.xiahunao.cn/C++Cherno 學習筆記day17 [66]-[70] 類型雙關、聯合體、虛析構函數、類型轉換、條件與操作斷點)
