useImperativeHandle

useImperativeHandle 可以使子组件对父组件暴露一个实例，这意味着父组件可以访问定义在子组件中的内容。

函数签名

useImperativeHandle(ref, createHandle, [deps])

• ref 参数可以由父组件使用 useRef 去创建，再传递给子组件，子组件再将 ref 传递给到 useImperativeHandle
• createHandle 是一个无参函数，返回一个实例，使得父组件中创建的 ref.current 可以引用这个实例对象。如 () => ({ getValues() { return { a: 123, b: 456 } } })
• [deps] 是一个依赖数组，当数组中的值更新后，实例对象会重新创建，当你的方法引用了某些值，请将这些值添加到依赖数组中。

如何使用

1. 子组件是一个函数式组件，因为要使用 useImperativeHandle hooks
2. 子组件需要借助 React.forwardRef 方法包装一层，使子组件可以接收 ref 这个特殊的属性
3. 父组件通过 useRef 创建一个 ref
4. 子组件将接收到的 ref 传递给 useImperativeHandle
5. 当父子组件都渲染完成时，父组件创建的 ref.current 等同于 useImperativeHandle hooks 返回的实例对象

代码示例 1

// 子组件
import React, { useImperativeHandle } from 'react'
interface Props {}
const SubComponent: React.FC<Props> = (props, ref) => {
    useImperativeHanlde(ref, () => ({
        getValues() {
            return {
                "name": "ming",
                "age": 18
            }
        }
    }) []);
    return <div></div>
}
export default React.forwardRef(SubComponent);

// 父组件
import React, { useRef } from 'react';
interface Props {}
const ParentComponent: React.FC<Props> = (props) => {
  const formRef = useRef();
  function handleClick() {
    if (formRef.current) {
      const values = formRef.getValues();
      console.log(values);
    }
  }
  return (
    <div>
      <button onClick={handleClick}>查询</button>
      <SubComponent ref={formRef} />
    </div>
  );
};

React 组件的特殊属性

• ref 和 key 是 React 中的两个特殊属性，在传递时和 props 一致