React useImperativeHandle Hook

hawk2014bj2024-07-01 21:56

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 <input {...props} ref={inputRef} />;
});

export default MyInput;

React 框架中对应的代码实现，代码实现比较简单，在绑定阶段mountImperativeHandle 方法中调用

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

总结

useImperativeHandle 在 React 为我提供了一个可以为 ref 绑定处理方法的 hook，useImperativeHandle 源码中可以看到实现了绑定以及清理的逻辑。