【 React 】三种 ref 的方式以及高阶组件必备 ref 转发

在React中没有直接的API去操作DOM 结构，所以就要用到 ref 来获取DOM结构，常用的方法有以下三种

1、字符串类型的ref

顾名思义 ref接收的是一个字符串，如果你目前还在使用 this.refs.textInput 这种方式访问 refs ，建议用回调函数或 createRef API 的方式代替。因为会有BUG

<div id="app"></div>
<script type="text/babel">
    //通过ref=""这种方式来去给dom元素进行标记
    //如果你目前还在使用 this.refs.textInput 这种方式访问 refs ，我们建议用回调函数或 createRef API 的方式代替。
    //https://react.docschina.org/docs/refs-and-the-dom.html
    class App extends React.Component{

        componentDidMount(){  //相当于Vue中的mounted钩子函数
            console.log("componentDidMount...",this)
            this.refs.textInput.focus()
        }
        render(){
            console.log("render...")
            return (
                <div>
                    <input ref="textInput"/>    
                </div>
            )
        }
    }
    ReactDOM.render(<App/>,document.getElementById("app"))
</script>

2、函数式ref

顾名思义，ref接收的是一个函数，函数的参数为设置ref属性的DOM结构

<div id="app"></div>
<script type="text/babel">
    class App extends React.Component{
        componentDidMount(){  //相当于Vue中的mounted钩子函数
            this.textInput.focus()
        }
        render(){
            return (
                <div>   {/*直接用回调函数的方式进行挂载*/}
                    <input ref={ (el)=>{ this.textInput = el} }  />    //讲DOM结构挂载到this的属性上，方便调用
                </div>
            )
        }
    }
    ReactDOM.render(<App/>,document.getElementById("app"))
</script>

3、利用react中封装的方法 createRef（）

此方法挂载的DOM结构在 current 属性中，如果是标签就是标签DOM，如果是组件就是组件对象。

<div id="app"></div>
<script type="text/babel">
    class App extends React.Component{
        constructor() { 
            super() //继承的时候，子类的constructor里面第一行代码必须写super关键字，目的调用父类的空构造
            //函数来去实例化子类本身。
            this.myRef = React.createRef()  //1.创建了一个ref的引用，并且可以通过this.myRef属性去进行访问
        }
        componentDidMount(){  //相当于Vue中的mounted钩子函数
            //3.注意：使用current属性才可以获取到标记的元素本身
            this.myRef.current.focus()
        }
        render(){
            return (
                <div>
                    {/*2.需要在组件或者dom元素上面通过ref进行标记*/}
                    <input  ref={this.myRef}/>    
                </div>
            )
        }
    }
    ReactDOM.render(<App/>,document.getElementById("app"))
</script>