useRefEffect

useRefEffect 是一个帮助你为特定 DOM 元素设置引用、并在元素变化时执行回调的 React Hook。此 Hook 会在元素变化时调用清理函数，以防止内存泄漏。

接口

function useRefEffect<RefElement extends HTMLElement = HTMLElement>(
  callback: (element: RefElement) => CleanupCallback | void,
  deps: DependencyList
): (element: RefElement | null) => void;

参数

• callbackrequired · (element: RefElement) => CleanupCallback | void
  

  在元素被设置时执行的回调函数。此函数可以返回一个清理函数。

• depsrequired · DependencyList
  

  一个定义回调何时应重新执行的依赖数组。每当 deps 变化时，callback 会重新执行。

返回值

• (element: RefElement | null) => void
  

  一个用于设置元素的函数。将此函数传给 ref 属性，每当元素变化时就会调用 callback。

示例

import { useRefEffect } from 'react-simplikit';

function Component() {
  const ref = useRefEffect<HTMLDivElement>(element => {
    console.log('Element mounted:', element);

    return () => {
      console.log('Element unmounted:', element);
    };
  }, []);

  return <div ref={ref}>Basic Example</div>;
}