useimprerativeHandle的使用

这个钩子让我想起来了vue中的有一个自定义指令的钩子方法，有点类似，只是不同的是，react中是在单个组件内，在一些使用场景上会受限，但是也刚好满足所需，而在vue中它既有全局的，也有内部的。

使用示例：
父组件：

import ImperativeHandle from "./component/ImperativeHandle"
import React from 'react'
import { Button } from 'antd'

const Home: React.FC = (props, ref) => {
  console.log(ref)
  const buttonRef = React.useRef(null) 
  // 这里就可以获取到子组件中所暴露的钩子，从而实现控制子组件
  const buttonHandler = () => {
    console.log(buttonRef)
    buttonRef.current.focus()
  }
  return <>
    <div>
      <Button onClick={buttonHandler}>我是按钮</Button>
      // 子组件
      <ImperativeHandle ref={buttonRef} />
    </div>
  </>
}

export default Home

子组件：

import { forwardRef, useImperativeHandle, useRef } from "react";

function FancyInput(props, ref) {
  const inputRef = useRef();
  // 设置组件方法，在父组件内调用
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} />;
}
//forwardRef这个方法就是将组件内设置的方法暴露给子组件
const ImperativeHandle = forwardRef(FancyInput);

export default ImperativeHandle