一个被你忽略的hook--useImperativeHandle

功能

Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。

使用场景

1. 管理焦点、文本选择或者媒体播放
2. 触发强制动画
3. 集成第三方dom库

访问ref

ref的值根据节点类型而有所不同

1. 当用于html元素时，接收的是dom元素作为其current值
2. 当用于类组件时，接收组件的挂载实hu例作为其current属性
3. 在函数组件上使用ref属性，需要 forwardRef 与 useImperativeHandle 结合使用

调用的时机

react会在组件挂载时给current属性传入Dom元素，并在组件卸载时传入null值，ref会在componentDidMount和componentDidUpdate生命周期钩子触发前更新

基本的用法

• 回调用法

<input type="text" ref={(ref)=>{this.inputRef = ref}}>

• createRef方式

inputRef = createRef() 
<input type="text" ref={this.inputRef}}> 

结合组件使用，绑定在组件上

1. 父组件-类组件

class App extends Component{
constructor(){
    state:{
        inputRef =  React.createRef()
}
    buttonClick(){
        this.inputRef.current.focus()
    }
    render(){
        return(
            <div>
            <Foo ref = {this.inputRef}>
            <button onClick={this.buttonClick}>
            </div>
        )
    }
}
const Foo =forwardRef((props,ref)=> {
    const inputRef =useRef()
    useImperativeHandle(ref,()=>{
        return {
            focus:function(){
                inputRef.current.focus()
            }
        }
    })
    render(){
        return <input type="text" ref={inputRef}}> 
    }
})

2. 父组件-函数式组件

 const App = () => {
 const buttonRef = useRef(null)

 const buttonClick(){
        buttonRef.current.focus()
    }
    render(){
        return(
            <div>
            <Foo ref = {buttonRef}>
            <button onClick={buttonClick}>
            </div>
        )
    }
}

const Foo =forwardRef((props,ref)=> {
    const inputRef =useRef()
    useImperativeHandle(ref,()=>{
        return {
            focus: function(){
                inputRef.current.focus()
            }
        }
    })
    render(){
        return <input type="text" ref={inputRef}}> 
    }
})