React 第十八章 Hook useImperativeHandle

React 的 useImperativeHandle 是一个自定义 Hook。该 Hook 一般配合 React.forwardRef 使用，主要用于在父组件中可以使用 ref 获取子组件暴露出来的属性和方法。

useImperativeHandle 接受两个参数：ref 和创建子组件属性和方法的函数。

function ChildComponent(props, ref) {
  // 在父组件中可以通过 ref.current 获取子组件的属性和方法
  useImperativeHandle(ref, () => ({
    childMethod: () => {
      console.log('This is a method in child component');
    },
    childProperty: 'This is a property in child component',
  }));

  return <div>Child component</div>;
}

const newChildComponent = React.forwardRef(ChildComponent)

// 父组件
function ParentComponent() {
  const childRef = useRef();

  useEffect(() => {
    // 在父组件中可以通过 ref.current 获取子组件的属性和方法
    console.log(childRef.current.childProperty);
    childRef.current.childMethod();
  }, []);

  return (
    <div>
      Parent component
      <newChildComponent ref={childRef} />
    </div>
  );
}

在上面的例子中，父组件 ParentComponent 中通过 useRef 创建了一个 childRef 来引用 newChildComponent 组件，newChildComponent 通过 forwardRef 将 ref 转发 ChildComponent， 并在 ChildComponent 组件中使用 useImperativeHandle 将子组件的属性和方法暴露给父组件。

在 ParentComponent 组件中，可以通过 childRef.current 来访问子组件 ChildComponent 暴露出来的属性和方法。在这个例子中，我们可以通过 childRef.current.childProperty 来获取子组件的属性，通过 childRef.current.childMethod() 来调用子组件的方法。

总的来说，useImperativeHandle 可以让父组件可以通过 ref 来获取子组件的属性和方法，使得父子组件之间的通信更加方便。