ahooks 工具函数介绍 ​

// packages/hooks/src/utils/isBrower.ts
const isBrowser =
!!(
  typeof window !== 'undefined' &&
  window.document &&
  window.document.createElement
);

export default isBrowser;

// packages/hooks/utils/useEffectWithTarget.ts
import { useEffect } from 'react';
import createEffectWithTarget from './createEffectWithTarget';

const useEffectWithTarget = createEffectWithTarget(useEffect);

export default useEffectWithTarget;

// packages/hooks/utils/useLayoutEffectWithTarget.ts
import { useLayoutEffect } from 'react';
import createEffectWithTarget from './createEffectWithTarget';

const useEffectWithTarget = createEffectWithTarget(useLayoutEffect);

export default useEffectWithTarget;

// packages/hooks/utils/domTarget.ts
type TargetValue<T> = T | undefined | null;
type TargetType = HTMLElement | Element | Window | Document;
export type BasicTarget<T extends TargetType = Element> =
  | (() => TargetValue<T>)
  | TargetValue<T>
  | MutableRefObject<TargetValue<T>>;

export function getTargetElement<T extends TargetType>(
  target: BasicTarget<T>, // dom，() => dom, ref
  defaultElement?: T // 默认值
) {
  if (!isBrowser) {
    return undefined;
  }

  if (!target) {
    return defaultElement;
  }

  let targetElement: TargetValue<T>;

  // 获取 dom 元素
  if (isFunction(target)) {
    targetElement = target();
  } else if ('current' in target) {
    targetElement = target.current;
  } else {
    targetElement = target;
  }

  return targetElement;
}

// packages/hooks/utils/depsAreSame.ts
import type { DependencyList } from 'react';

export default function depsAreSame(
  oldDeps: DependencyList, // 旧的依赖
  deps: DependencyList // 新的依赖
): boolean {
  if (oldDeps === deps) return true;
  for (let i = 0; i < oldDeps.length; i++) {
    if (!Object.is(oldDeps[i], deps[i])) return false;
  }
  return true;
}

// packages/hooks/utils/isDev.ts
const isDev =
  process.env.NODE_ENV === "development" ||
  process.env.NODE_ENV === "test";

export default isDev;