React组件绑定ref的方法

1. 使用字符串绑定，类似于vue中ref的用法，此方法React新版本不推荐，为防止后期废除，不建议使用

export default class App extends React.Component {

    
    handleClick=()=>{
        console.log(this.refs.inputRef.value);
    }
    render() {
        return (
            <div>
                <input type="text" ref="inputRef" />
                <button onClick={this.handleClick}>++++</button>
            </div>
        )
    }
}

2. 通过React.createRef()

export default class App extends React.Component {
    constructor(){
        super()
        this.inputRef=React.createRef()
    }

    
    handleClick=()=>{
        console.log(this.inputRef.current.value);
    }
    render() {
        return (
            <div>
                <input type="text" ref={this.inputRef} />
                <button onClick={this.handleClick}>++++</button>
            </div>
        )
    }
}

3. 通过回调函数的方法

export default class App extends React.Component {
    
    inputRef=null
    handleClick=()=>{
        console.log(this.inputRef.value);
    }
    render() {
        return (
            <div>
                <input type="text" ref={el=>this.inputRef=el} />
                <button onClick={this.handleClick}>++++</button>
            </div>
        )
    }
}

从性能优化的角度讲，我们不是很推荐使用ref，如果state能完成功能，建议不使用ref获取组件数据