xxf_react 0.3.1 → 0.3.3

package/dist/utils/index.d.ts

@@ -1,3 +1,4 @@
 export * from './scroll-to-center';
 export * from './tailwind';
+export * from './reload';
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAEA,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAEA,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA"}

package/dist/utils/index.js

@@ -1,3 +1,4 @@
 'use client';
 export * from './scroll-to-center';
 export * from './tailwind';
+export * from './reload';

package/dist/utils/reload.d.ts

@@ -0,0 +1,62 @@
+/**
+ * useReloadKey 配置选项
+ */
+interface UseReloadKeyOptions {
+    /** 初始值，默认 0 */
+    initialValue?: number;
+    /** reload 后的回调，参数为当前累计刷新次数 */
+    onReload?: (reloadCount: number) => void;
+}
+/**
+ * useReloadKey 返回值
+ */
+interface UseReloadKeyReturn {
+    /** 当前 reloadKey 值，用于组件 key 属性 */
+    reloadKey: number;
+    /** 触发刷新，reloadKey 自增 1 */
+    reload: () => void;
+    /** 重置为初始值，同时清零刷新次数 */
+    reset: () => void;
+    /** 累计刷新次数（不受 reset 影响前的总次数） */
+    reloadCount: number;
+}
+/**
+ * 用于强制刷新组件的 Hook
+ *
+ * 通过改变 key 值来触发 React 组件的卸载和重新挂载，
+ * 常用于需要完全重置组件状态的场景。
+ *
+ * @param options - 配置选项
+ * @returns 包含 reloadKey、reload、reset、reloadCount 的对象
+ *
+ * @example
+ * ```tsx
+ * // 基础用法
+ * const { reloadKey, reload } = useReloadKey();
+ *
+ * return (
+ *   <div>
+ *     <ChildComponent key={reloadKey} />
+ *     <button onClick={reload}>刷新组件</button>
+ *   </div>
+ * );
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // 带回调的用法
+ * const { reloadKey, reload, reloadCount } = useReloadKey({
+ *   onReload: (count) => console.log(`第 ${count} 次刷新`)
+ * });
+ *
+ * return (
+ *   <div>
+ *     <DataFetcher key={reloadKey} />
+ *     <button onClick={reload}>重新加载数据 (已刷新 {reloadCount} 次)</button>
+ *   </div>
+ * );
+ * ```
+ */
+export declare function useReloadKey(options?: UseReloadKeyOptions): UseReloadKeyReturn;
+export {};
+//# sourceMappingURL=reload.d.ts.map

package/dist/utils/reload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reload.d.ts","sourceRoot":"","sources":["../../src/utils/reload.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,UAAU,mBAAmB;IACzB,eAAe;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED;;GAEG;AACH,UAAU,kBAAkB;IACxB,iCAAiC;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,0BAA0B;IAC1B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,sBAAsB;IACtB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,+BAA+B;IAC/B,WAAW,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,mBAAwB,GAAG,kBAAkB,CA+BlF"}

package/dist/utils/reload.js

@@ -0,0 +1,66 @@
+import { useState, useCallback, useRef } from 'react';
+/**
+ * 用于强制刷新组件的 Hook
+ *
+ * 通过改变 key 值来触发 React 组件的卸载和重新挂载，
+ * 常用于需要完全重置组件状态的场景。
+ *
+ * @param options - 配置选项
+ * @returns 包含 reloadKey、reload、reset、reloadCount 的对象
+ *
+ * @example
+ * ```tsx
+ * // 基础用法
+ * const { reloadKey, reload } = useReloadKey();
+ *
+ * return (
+ *   <div>
+ *     <ChildComponent key={reloadKey} />
+ *     <button onClick={reload}>刷新组件</button>
+ *   </div>
+ * );
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // 带回调的用法
+ * const { reloadKey, reload, reloadCount } = useReloadKey({
+ *   onReload: (count) => console.log(`第 ${count} 次刷新`)
+ * });
+ *
+ * return (
+ *   <div>
+ *     <DataFetcher key={reloadKey} />
+ *     <button onClick={reload}>重新加载数据 (已刷新 {reloadCount} 次)</button>
+ *   </div>
+ * );
+ * ```
+ */
+export function useReloadKey(options = {}) {
+    const { initialValue = 0, onReload } = options;
+    const [reloadKey, setReloadKey] = useState(initialValue);
+    const [reloadCount, setReloadCount] = useState(0);
+    // 用 ref 存储回调，避免 useCallback 频繁重建
+    const onReloadRef = useRef(onReload);
+    onReloadRef.current = onReload;
+    const reload = useCallback(() => {
+        setReloadKey(prev => prev + 1);
+        setReloadCount(prev => {
+            var _a;
+            const newCount = prev + 1;
+            // 回调放在 setState 外部更规范，但这里为了获取最新值
+            (_a = onReloadRef.current) === null || _a === void 0 ? void 0 : _a.call(onReloadRef, newCount);
+            return newCount;
+        });
+    }, []);
+    const reset = useCallback(() => {
+        setReloadKey(initialValue);
+        setReloadCount(0);
+    }, [initialValue]);
+    return {
+        reloadKey,
+        reload,
+        reset,
+        reloadCount,
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xxf_react",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "private": false,
 
   "type": "module",