监控、ref 与全屏

监控所有权

DataMonitorService 与单例 dataMonitorService 将旧 Condition 作为 POST JSON 轮询 count URL。enable(viewId, countUrl, viewName, condition, notification, interval = 30000) 替换该视图定时器、立即查询，并将配置保存到 view:dataMonitor。首次计数建立基线，后续任何不同计数（含减少）都会发布 DATA_CHANGED 并尝试浏览器通知。失败记录日志，不保证重叠轮询串行或按响应顺序提交。disable(viewId) 删除定时器和配置，不取消已经发出的 HTTP I/O。initialize() 以默认间隔恢复启用配置，自定义间隔不持久化。

useDataMonitor 返回 isEnabled、enable/disable/toggle；condition 与 notification 变化更新已启用记录。卸载只禁用当前跟踪的 viewId，单独更换 viewId 不自动禁用旧条目。每个 viewId 保持一个生命周期所有者，迁移时显式禁用旧 ID。countUrl/viewName/interval 变化需再次 enable。useDataMonitorEventBus 提供手动命名 subscribe/unsubscribe，不自动清理，必须在 effect 中配对；dataMonitorEventBus.emit 返回 Promise<void>。通知通道注册是内部实现，不可从根入口导入。

工具

API	返回与生命周期
useLatest(value)	每次 render 更新 RefObject，不触发重渲染。
useMounted()	返回稳定函数，报告 effect 挂载状态；挂载前/清理后为 false。
useForceUpdate()	通过 reducer 递增强制重渲染的回调。
useRequestId()	计数器从 0 开始；generate/invalidate 递增、current 读取、isLatest 比较、reset 归零，本身不取消操作。
useRefs<T>()	Map 风格 register/get/set/delete/has/clear/size/遍历；register 返回 ref 回调，null 删除键。卸载清空，修改不触发渲染。

全屏

useFullscreen({ target? } = {}) 返回 fullscreen/getTarget/enter/exit/toggle。目标优先级为动态传入元素、target.current、document.documentElement。null 清除动态覆盖，undefined 保留。FullscreenProvider 未传 target 时创建 div 包装；useFullscreenContext() 在外部返回 undefined。Hook 监听 document 全屏事件并在清理时解绑，但卸载不自动退出全屏。DOM 工具需要浏览器及原生全屏权限/用户激活。不支持的进入/退出 API 会抛错，enter/exit/toggle 返回可能拒绝的 Promise<void>。手动 addFullscreenChangeListener 必须用相同回调配对 removeFullscreenChangeListener。

完整示例

import {
  FullscreenProvider,
  useFullscreenContext,
} from '@ahoo-wang/fetcher-react';
function Toggle() {
  const fullscreen = useFullscreenContext();
  return (
    <button
      onClick={() => {
        void fullscreen?.toggle().catch(console.error);
      }}
    >
      Toggle fullscreen
    </button>
  );
}
export function Presentation() {
  return (
    <FullscreenProvider>
      <Toggle />
      <p>Content</p>
    </FullscreenProvider>
  );
}

公开签名与类型

以下签名按当前根入口可达声明核对。? 表示可省略；泛型/接口只约束编译期，继承项与关联类型可从 符号索引 定位。运行时默认值和失败行为以本页上文为准。

useFullscreen

export function useFullscreen(
  options?: UseFullscreenOptions,
): UseFullscreenReturn;

实现默认值: options = {}.

packages/react/src/core/fullscreen/useFullscreen.ts:60

UseFullscreenOptions

export interface UseFullscreenOptions {
  target?: RefObject<HTMLElement | null>;
}

packages/react/src/core/fullscreen/useFullscreen.ts:24

UseFullscreenReturn

export interface UseFullscreenReturn {
  fullscreen: boolean;
  getTarget: () => HTMLElement;
  toggle: (target?: HTMLElement | null) => Promise<void>;
  enter: (target?: HTMLElement | null) => Promise<void>;
  exit: () => Promise<void>;
}

packages/react/src/core/fullscreen/useFullscreen.ts:31

FullscreenProvider

export function FullscreenProvider(
  props: FullscreenProviderProps,
): import('react').JSX.Element;

packages/react/src/core/fullscreen/FullscreenContext.tsx:32

useFullscreenContext

export function useFullscreenContext(): FullscreenContextValue | undefined;

packages/react/src/core/fullscreen/FullscreenContext.tsx:44

FullscreenContextValue

export type FullscreenContextValue = UseFullscreenReturn;

packages/react/src/core/fullscreen/FullscreenContext.tsx:22

FullscreenContext

declare const FullscreenContext: import('react').Context<
  UseFullscreenReturn | undefined
>;

packages/react/src/core/fullscreen/FullscreenContext.tsx:24

FullscreenProviderProps

export interface FullscreenProviderProps extends UseFullscreenOptions {
  children: ReactNode;
}

packages/react/src/core/fullscreen/FullscreenContext.tsx:28

getFullscreenElement

export function getFullscreenElement(): HTMLElement | null;

packages/react/src/core/fullscreen/utils.ts:18

isFullscreen

export function isFullscreen(): boolean;

packages/react/src/core/fullscreen/utils.ts:27

enterFullscreen

export function enterFullscreen(element: HTMLElement): Promise<void>;

packages/react/src/core/fullscreen/utils.ts:36

exitFullscreen

export function exitFullscreen(): Promise<void>;

packages/react/src/core/fullscreen/utils.ts:59

addFullscreenChangeListener

export function addFullscreenChangeListener(callback: () => void): void;

packages/react/src/core/fullscreen/utils.ts:82

removeFullscreenChangeListener

export function removeFullscreenChangeListener(callback: () => void): void;

packages/react/src/core/fullscreen/utils.ts:93

useRequestId

export function useRequestId(): UseRequestIdReturn;

packages/react/src/core/useRequestId.ts:71

UseRequestIdReturn

export interface UseRequestIdReturn {
  generate: () => number;
  current: () => number;
  isLatest: (requestId: number) => boolean;
  invalidate: () => void;
  reset: () => void;
}

packages/react/src/core/useRequestId.ts:19

useLatest

export function useLatest<T>(value: T): RefObject<T>;

packages/react/src/core/useLatest.ts:47

useMounted

export function useMounted(): () => boolean;

packages/react/src/core/useMounted.ts:40

useRefs

export function useRefs<T>(): UseRefsReturn<T>;

packages/react/src/core/useRefs.ts:53

UseRefsReturn

export interface UseRefsReturn<T> extends Iterable<[Key, T]> {
  register: (key: Key) => (instance: T | null) => void;
  get: (key: Key) => T | undefined;
  set: (key: Key, value: T) => void;
  delete: (key: Key) => boolean;
  has: (key: Key) => boolean;
  clear: () => void;
  readonly size: number;
  keys: () => IterableIterator<Key>;
  values: () => IterableIterator<T>;
  entries: () => IterableIterator<[Key, T]>;
}

packages/react/src/core/useRefs.ts:21

useForceUpdate

export function useForceUpdate(): () => void;

packages/react/src/core/useForceUpdate.ts:45

DataMonitorNotificationConfig

export interface DataMonitorNotificationConfig {
  title: string;
  navigationUrl?: string;
}

packages/react/src/dataMonitor/DataMonitorService.ts:20

DataMonitorService

export class DataMonitorService {
  initialize(): void;
  enable(
    viewId: string,
    countUrl: string,
    viewName: string,
    condition: Condition,
    notification: DataMonitorNotificationConfig,
    interval: number = 30000,
  ): void;
  disable(viewId: string): void;
  updateCondition(viewId: string, condition: Condition): void;
  updateNotification(
    viewId: string,
    notification: DataMonitorNotificationConfig,
  ): void;
  isEnabled(viewId: string): boolean;
}

packages/react/src/dataMonitor/DataMonitorService.ts:45

dataMonitorService

declare const dataMonitorService: DataMonitorService;

packages/react/src/dataMonitor/DataMonitorService.ts:217

useDataMonitor

export function useDataMonitor(
  options: UseDataMonitorOptions,
): UseDataMonitorReturn;

packages/react/src/dataMonitor/useDataMonitor.ts:25

UseDataMonitorOptions

export interface UseDataMonitorOptions {
  viewId: string;
  countUrl: string;
  viewName: string;
  condition: Condition;
  notification: DataMonitorNotificationConfig;
  interval?: number;
}

packages/react/src/dataMonitor/useDataMonitor.ts:9

UseDataMonitorReturn

export interface UseDataMonitorReturn {
  isEnabled: boolean;
  enable: () => void;
  disable: () => void;
  toggle: () => void;
}

packages/react/src/dataMonitor/useDataMonitor.ts:18

useDataMonitorEventBus

export function useDataMonitorEventBus(): UseDataMonitorEventBusReturn;

packages/react/src/dataMonitor/useDataMonitorEventBus.ts:28

DataChangedEvent

export interface DataChangedEvent {
  type: 'DATA_CHANGED';
  viewId: string;
  viewName: string;
  previousTotal: number | null;
  currentTotal: number;
}

packages/react/src/dataMonitor/useDataMonitorEventBus.ts:10

UseDataMonitorEventBusReturn

export interface UseDataMonitorEventBusReturn {
  subscribe: (handler: EventHandler<DataChangedEvent>) => boolean;
  unsubscribe: (handlerName: string) => boolean;
}

packages/react/src/dataMonitor/useDataMonitorEventBus.ts:18

dataMonitorEventBus

declare const dataMonitorEventBus: {
  emit: (event: DataChangedEvent) => Promise<void>;
};

packages/react/src/dataMonitor/useDataMonitorEventBus.ts:44

相关专题

Fetcher 请求 Hook · Promise 与查询状态 · API Hook 工厂 · 防抖执行 · 存储与事件订阅 · 安全 Hook 与路由守卫 · Wow 查询 Hook