react之ref

react中ref是为了获得组件或dom元素的引用，ref不能赋值给函数型组件，react16.3之前有两种使用ref的方式，一种是string，还有一种是回调函数的形式

//string形式
class Father extends Component{
    constructor(){
        super()
       
    }
   
   componentDidMount(){
       console.log(this.refs)
   }

    render(){
    return(<div>
     <Son ref="text"></Son>
    </div>)
    }
}

//回调函数类型
class Father extends Component{
    constructor(){
        super()
       
    }
   
   componentDidMount(){
       console.log(this.text)
   }

    render(){
    return(<div>
     <Son ref={text=>this.text=text}></Son>
    </div>)
    }
}
export default Father

不建议使用string类型的ref，对性能不好。

react16之后新出了useRef，forwardRef，createRef

useRef只能在函数型组件中使用

function Son(){

    var text=React.useRef()
    useEffect(()=>{
        console.log(text)
    },[])
    return(<div ref={text}>子组件</div>)
}

createRef也是为了获得dom元素或者组件的实例

class Father extends Component{
    constructor(){
        super()
     this.text=React.createRef()
    }
    componentDidMount(){
        console.log(this.text.current)
    }

    render(){
    return(<div ref={this.text}>
     <Son></Son>
    </div>)
    }
}

forwardRef可接收上层组件传递下来的ref，然后再赋给下层组件的子组件

//父组件
class Father extends Component{
    constructor(){
        super()
     this.ref=React.createRef()
    }
    componentDidMount(){
        console.log(this.ref.current.text.current)
    }

    render(){
    return(<div>
     <Son ref={this.ref}></Son>
    </div>)
    }
}
//子组件
const Middle=Component=>
    React.forwardRef((props,ref)=>(
       <Component {...props} ref={ref}></Component>
   
    ))

class Son extends Component{
    constructor(props){
        super(props)
        this.text=React.createRef();
    }
    render(){
        return(<div>
            <input placeholder='被高阶组件包裹' ref={this.text}></input>
        </div>)
    }
}



export default Middle(Son)