useImperativeHandle, forwardRef ，使方法和属性应暴露给父组件

useImperativeHandle 是 React 中的一个 Hook，用于自定义组件的实例值。它通常与 forwardRef 一起使用，允许你在父组件中通过引用（ref）访问子组件的特定实例方法或属性。以下是对 useImperativeHandle 的详细解析。

1、语法

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

const MyComponent = forwardRef((props, ref) => {
  // 自定义暴露给父组件的实例方法
  useImperativeHandle(ref, () => ({
    customMethod: () => {
      console.log('Custom method called!');
    },
  }));

  return <div>My Component</div>;
});

2、参数

• ref: 传入的 ref 对象，通常是由父组件创建并传递给子组件的。
• createHandle: 一个函数，返回一个对象，定义了需要暴露给父组件的实例方法和属性。

3、使用场景

• 1、封装逻辑: 通过 useImperativeHandle，你可以封装子组件的实现细节，只暴露必要的 API 给父组件。这样可以提高组件的可重用性和灵活性。

• 2、访问子组件方法: 当父组件需要调用子组件内部的某个方法时，可以通过 ref 直接调用，而不需要通过 props 传递回调。

4、示例

以下是一个使用 useImperativeHandle 的示例

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

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

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

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

const Parent = () => {
  const childRef = useRef();

  const handleFocus = () => {
    childRef.current.focus(); // 调用子组件的 focus 方法
  };

  const handleClear = () => {
    childRef.current.clear(); // 调用子组件的 clear 方法
  };

  return (
    <div>
      <Child ref={childRef} />
      <button onClick={handleFocus}>Focus Input</button>
      <button onClick={handleClear}>Clear Input</button>
    </div>
  );
};

export default Parent;

5、总结

useImperativeHandle 是一个强大的 Hook，使得在 React 组件中更灵活地控制组件的实例方法变得可能。它可以让你清晰地定义哪些方法和属性应暴露给父组件，从而实现更好的封装和重用。