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

export default MyInput;


React 框架中对应的代码实现,代码实现比较简单,在绑定阶段mountImperativeHandle 方法中调用
在这里插入图片描述
返回值绑定在 ref.current 属性上,最后返回一个清理 ref.current 的方法。
在这里插入图片描述

总结

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

上一篇:华为HCIP Datacom H12-821 卷27


下一篇:DatawhaleAI夏令营2024 Task2