useImperativeHandle

用于让父组件获取并执行子组件内某些自定义函数，子组件将自己内部的函数通过 useImperativeHandle 添加到父组件中 useRef 定义的对象中。

forwardRef 用于向子组件传递父组件的 ref。

index.tsx

import React, { useRef, useImperativeHandle, forwardRef } from 'react';

function MyApp() {
  const childRef = useRef(null);

  const handleButtonClick = () => {
    childRef.current.focusInput();
  };

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleButtonClick}>Focus Input</button>
    </div>
  );
};

const ChildComponent = forwardRef((props, ref) => {
  const inputRef = useRef(null);

  // 定义暴露给父组件的方法
  useImperativeHandle(ref, () => ({
    focusInput: () => {
      inputRef.current.focus();
    },
  }));

  return <input ref={inputRef} />;
});

export default MyApp;

useImperativeHandle 在某种程度上可以看作是违反 React 的单向数据流原则，因为它允许从子组件向父组件传递实例方法或属性，从而打破了数据从父组件流向子组件的单向流动。

但在一些特定情况下使用它是合理的，开发者需要在灵活性和遵循最佳实践之间做出权衡。