这个hook比较简单，作用: 获取函数组件里面的事件,我们通过 ref 来获取类组件的事件，所以 这个 useImperativeHandle Hook 一般是于 ref 转发一起使用。
语法
useImperativeHandle(ref, createHandle, [deps])
- 参数一 ref: 子组件中 ref转发传过来的 ref
- 参数二 createHandle: 子组件需要对外的事件，通过一个函数返回对象定义
- 参数三deps: 依赖，如果依赖变化，则会重新调用
案例
获取类组件中的事件
获取类组件的事件，就是需要获取类组件的实例对象，然而获取实例对象，通过ref 来就行。
import React, { PureComponent, Ref, useCallback } from 'react' class TestGetClassHandle extends PureComponent { // 测试的事件 testHandle = () => { console.log('获取类组件中的事件'); } render() { return ( <div> <h1>类组件</h1> </div> ) } } export default function TestImperativeHook() { // 创建一个 ref const classRef: Ref<TestGetClassHandle> = React.createRef(); // 获取子组件的事件 const handle = useCallback(() => { classRef.current!.testHandle() }, []) return ( <div> <TestGetClassHandle ref={classRef}></TestGetClassHandle> <button onClick={handle}>获取子组件事件</button> </div> ) }
类组件效果
函数组件的事件
首先通过 ref 转发，然后在通过useImperativeHandle Hook获取函数组件中的事件
import React, { Ref, useCallback, useImperativeHandle } from 'react' // 定义接口类型 interface IR { testHandle: () => void } function TestGetFuncHandle(props: {}, ref: Ref<IR>) { useImperativeHandle(ref, () => ({ // 需要把函数组件对外暴露的的事件写到这里 testHandle: handle })); const handle = () => { console.log('函数组件的事件调用了'); } return ( <> <div >函数组件</div> <button onClick={ handle}>组件自己调用</button> </> ) } const NewTestFor = React.forwardRef(TestGetFuncHandle); export default function TestImperativeHook() { const funcRef: Ref<IR> = React.createRef() // 获取子组件的事件 const handle = useCallback(() => { funcRef.current!.testHandle() }, []) return ( <div> <NewTestFor ref={funcRef}></NewTestFor> <button onClick={handle}>获取子组件事件</button> </div> ) }
函数组件调用效果
