usermperativeHandle hooks react

`useImperativeHandle` 是React Hooks中的一个高级功能，它允许你在函数组件内部创建一个可调用的对象或方法，但不会暴露给父组件或外部组件。这对于控制组件间的交互非常有用，特别是当你想隐藏实现细节或提供特定行为时。

使用示例（假设我们有一个`CustomComponent`，想让其具有一些特殊的 imperative-style（命令式）接口）：

import { useState, useImperativeHandle } from 'react';

// 声明一个内部状态和一个回调函数
const CustomComponent = (props) => {
  const [state, setState] = useState('default state');

  // 创建一个可执行的方法
  const doSomethingSpecial = () => {
    // ...
  };

  // 使用useImperativeHandle包装可执行的方法
  useImperativeHandle(
    'customHandle',
    () => ({
      // 返回一个对象，包含你想暴露给父组件的方法
      specialMethod: doSomethingSpecial,
    }),
    // 这里可以指定依赖项，当它们改变时更新handle
    [doSomethingSpecial]
  );

  return <div>{state}</div>;
};

// 父组件中调用
const ParentComponent = () => {
  const customHandleRef = useRef(null);
  
  // 使用ref来接收CustomComponent实例并传递给handle
  useEffect(() => {
    if (customHandleRef.current) {
      customHandleRef.current.specialMethod();
    }
  }, []);

  return (
    <div>
      <CustomComponent ref={customHandleRef} />
    </div>
  );
};