react 进阶hook 之 useImperativeHandle hook

这个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>
  )
}

函数组件调用效果