React三大属性之refs

前言

javascript 复制代码

<div id="test"></div>
<script type="text/babel">
    class Demo extends React.Component{
        showData = ()=>{
            const inputValue = document.getElementById("input")
            alert(inputValue)
        }
        render(){
            return (
                <input type="text" id="input" />
                <button onClick="{ this.showData }"></button>
            )
        }
    }

    ReactDOM.render(<Demo />,document.getElementById("test"))
</script>

以上，我们给按钮绑定了一个事件，通过原生的选择器获取了输入框的这个DOM，输出了输入框里的内容。

组件内的标签可以定义ref属性来标识自己

1、字符串式ref

javascript 复制代码

<div id="test"></div>
<script type="text/babel">
    class Demo extends React.Component{

        showData = ()=>{
            alert(this.refs.input1.value)
        }
        showData2 = ()=>{
            alert(this.refs.input2.value)
        } 

        render(){
            return (
                <input type="text" ref="input1"/>
                <button onClick="{ this.showData }"></button>
                <input type="text" ref="input2" onBlur="{ this.showData2 }" />
            )
        }
    }

    ReactDOM.render(<Demo />,document.getElementById("test"))
</script>

这里的在标签中添加ref类似于vue2的ref的使用

字符串类型的refs存在效率低的问题，未来版本可能会移除

2、回调函数类型的ref

javascript 复制代码

<div id="test"></div>
<script type="text/babel">
    class Demo extends React.Component{
        showData = ()=>{
            const input1 = this
            alert(input1.value)
        }
        render(){
            return (
                <input type="text" ref={ c=>this.input1 = c } />
                <button onClick="{ this.showData }"></button>
            )
        }
    }

    ReactDOM.render(<Demo />,document.getElementById("test"))
</script>

解释

ref={ c=>this.input1 = c } 这个代码实际是 ref={ (c)=>{ this.input1 = c } }，而这个C打印的话，可以发现它所代表的是input这个DOM。

3、回调ref的执行次数

javascript 复制代码

 <input type="text" ref={ c=>this.input1 = c } />

官网中说：如果ref回调函数是以内联函数的方式定义的，在更新过程中，它会被执行两次，第一次传入参数 null ，然后第二次传入参数DOM元素，这是因为在每次渲染时会创建一个新的函数梳理，所以React清空旧的ref并且设置新的。通过将ref的回调函数定义成class的绑定函数的方式就可以避免上述问题，但是大多数情况下它是无关紧要的。

我们之前说过render这个函数的执行次数是1+n次，当运行时，该标签发生的更新，那这个ref的执行就会次数就会+2。

ref的回调函数定义成class的绑定函数的方式

javascript 复制代码

<div id="test"></div>
<script type="text/babel">
    class Demo extends React.Component{
        showData = ()=>{
            const { input1 } = this
            alert(input1.value)
        }

        showInput=(c)=>{
            this.input1 = c
            //这个c就是input这个DOM
        }
        render(){
            return (
                //在JSX语法中，如果想注释一些html代码，可以使用 { /*     */ }的形式注释
                //因为在JSX中，{}里可以写js代码
                {/*<input type="text" ref={ c=>this.input1 } />*/}


                <input type="text" ref={ this.showInput } />
                <button onClick="{ this.showData }"></button>
            )
        }
    }

    ReactDOM.render(<Demo />,document.getElementById("test"))
</script>

4、createRef的使用

React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点，该节点是专人专用，也就是只能存储一个DOM

javascript 复制代码

<div id="test"></div>
<script type="text/babel">
    class Demo extends React.Component{
        
        myRef = React.createRef()

        showData = ()=>{
            alert(this.myRef.current.value)
        } 

        render(){
            return (
                <input type="text" ref="{ this.myRef }"/>
                <button onClick="{ this.showData }"></button>
            )
        }
    }

    ReactDOM.render(<Demo />,document.getElementById("test"))
</script>