useImperativeHandle暴露函数给父组件

和forwardRef类似，forwardRef是把子组件dom元素暴漏给父组件

useImperativeHandle是子组件将自身的方法暴漏给父组件

当我们在父组件中想调用子组件的方法时，可以这么写

    import { forwardRef, useImperativeHandle, useRef } from 'react'
    
    const Son = forwardRef((props, ref) => {
        const inputRef = useRef(null)
        const focusHandle = () => {
            inputRef.current.focus()
        }
        
        // 把方法暴漏给父组件
        useImperativeHandle(ref, () => {
            return {
                // 暴漏的方法
                focusHandle
            }
        })
    
        return <input type="text" ref={inputRef} />
    })
    
    function App() {
        const sonRef = useRef(null)
        const focusHandle = () => {
            console.log(sonRef)
            sonRef.current.focusHandle()
        }
        return (
            <>
                <Son ref={sonRef} />
                <button onClick={focusHandle}>focus</button>
            </>
        )
    }