组件三大组件 refs

1. 字符串的ref （废弃）

<script type="text/babel">
        //创建组件
        class Demo  extends React.Component{
            showData=()=>{
                // 使用react就不要使用document了 
                const input = document.getElementById('input1');
                //alert(input.value)
                console.log(this.refs.input1.value); // 真正的节点信息，不是虚拟节点
            }
            // 展示右侧输入框的数据
            showData2=()=>{
                console.log(this.refs.input2.value);
            }
            render(){
                return  (
                   <div>
                        <input ref ='input1'  id= 'input1' type  = 'text' placeholder = '点击按钮提示数据' /> 
                        <button  onClick = {this.showData}>点我提示左侧的数据</button>
                        <input ref='input2' onBlur = {this.showData2} type="text" placeholder='失去焦点提示数据'  />
                    </div>)
            }
        }
    // 渲染组件到页面 
    ReactDOM.render (<Demo /> ,document.getElementById("test"));
    </script>

存在效率问题 效率不高

2. 回调函数 ref 

  class Demo  extends React.Component{
            showData=()=>{
                console.log(this.input1.value);
            }
            // 展示右侧输入框的数据
            showData2=()=>{
               
            }
            render(){
                return  (
                   <div>
                        <input ref ={currentNode=>this.input1=currentNode} type  = 'text' placeholder = '点击按钮提示数据' /> 
                       <input ref ={this.saveInput} type  = 'text' placeholder = '点击按钮提示数据' /> 
                        <button  onClick = {this.showData}>点我提示左侧的数据</button>
                    </div>)
            }
        }
    // 渲染组件到页面 
    ReactDOM.render (<Demo /> ,document.getElementById("test"));

回调函数 修改的时候，会调用两次   一次为null  一次为真实document   内联回调 这种没有影响

3. createRef （官方推荐） 

   //创建组件
        class Demo  extends React.Component{
           // react专人专用的 需要创建多个createRef
            myRef  = React.createRef()
            showData=()=>{
                console.log(this.myRef.current.value);
            }
            render(){
                return  (
                   <div>
                        <input ref = {this.myRef} type  = 'text' placeholder = '点击按钮提示数据' /> 
                        <button  onClick = {this.showData}>点我提示左侧的数据</button>
                    </div>)
            }
        }
    // 渲染组件到页面 
    ReactDOM.render (<Demo /> ,document.getElementById("test"));