react-ref属性

1、最开始的写法-字符串写法

class Demo extends React.Component {
    showData = () => {
        const {input1} = this.refs;
        alert(input1.value);
    }
    render() {
        return (
            <div>
                <input ref="input1" onBlur={this.showData} />
            </div>
        )
    }
}

缺点：效率低

2、回调函数写法

class Demo extends React.Component {
    showData = () => {
        const {input1} = this;
        alert(input1.value);
    }
    render() {
        return (
            <div>
                <input ref={c => this.input1 = c} onBlur={this.showData} />
            </div>
        )
    }
}

回调函数的参数c，是ref当前所处的节点

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

class Demo extends React.Component {
    showData = () => {
        const {input1} = this;
        alert(input1.value);
    }
    saveInput = (c) => {
        this.input1 = c;
    }
    render() {
        return (
            <div>
                <input ref={this.saveInput} onBlur={this.showData} />
            </div>
        )
    }
}

3、React.createRef()用法

class Demo extends React.Component {
    myRef = React.createRef()
    showData = () => {
        const {input1} = this;
        alert(this.myRef.current.value);
    }
    
    render() {
        return (
            <div>
                <input ref={this.myRef} onBlur={this.showData} />
            </div>
        )
    }
}

React.createRef()调用后可以返回一个容器，该容器可以存储被ref所标识的节点，该容器是’专人专用’的