React useImperativeHandle Hook

useImperativeHandle Hook 是一个比较比较简单的 hook，为 ref 节点添加一些处理方法，下面是来自官网例子，为 ref 添加了两个方法。

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

const MyInput = forwardRef(function MyInput(props, ref) {
const inputRef = useRef(null);

useImperativeHandle(ref, () => {
return {
focus() {
inputRef.current.focus();
},
scrollIntoView() {
inputRef.current.scrollIntoView();
},
};
}, []);

return ;
});

export default MyInput;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
React 框架中对应的代码实现，代码实现比较简单，在绑定阶段mountImperativeHandle 方法中调用

返回值绑定在 ref.current 属性上，最后返回一个清理 ref.current 的方法。

在React中，useImperativeHandle Hook 允许父组件访问并调用子组件中的某些方法或属性，从而实现自定义的交互逻辑。这对于需要直接操作子组件内部状态或功能的场景非常有用，尤其是那些使用了高阶组件、渲染道具（render props）或forwardRef的情况。

如果你想要通过一个ref转发多个方法或属性，可以通过创建一个对象，将这些方法或属性作为对象的键值对，然后将这个对象传递给useImperativeHandle。下面是一个简单的示例：

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

// 子组件
const Child = forwardRef((props, ref) => {
  const childRef = useRef();

  // 定义你想暴露给父组件的方法或属性
  const methodOne = () => {
    console.log("Method One called");
  };

  const methodTwo = (value) => {
    console.log(`Method Two called with value: ${value}`);
  };

  // 使用 useImperativeHandle 来暴露方法
  useImperativeHandle(ref, () => ({
    // 你可以在这里返回任何你希望父组件能访问到的方法或属性
    methodOne,
    methodTwo,
  }));

  return (
    <div>
      <h3>Child Component</h3>
    </div>
  );
});

// 父组件
const Parent = () => {
  const childRef = useRef();

  const callMethodsFromChild = () => {
    childRef.current.methodOne();
    childRef.current.methodTwo("Hello from Parent");
  };

  return (
    <div>
      <h2>Parent Component</h2>
      <button onClick={callMethodsFromChild}>Call Child Methods</button>
      <Child ref={childRef} />
    </div>
  );
};

export default Parent;

在这个例子中，Child组件通过forwardRef接收一个ref，并使用useImperativeHandle来暴露methodOne和methodTwo两个方法。在Parent组件中，我们通过这个ref调用子组件的方法，实现了跨组件的直接交互。
总结