feat(uselatest & useunmount): remove deps ahooks, add useLatest & use…

…Unmount

packages/app/src/app.config.ts

@@ -29,6 +29,8 @@ export default {
     'pages/useDebounceFn/index',
     'pages/useThrottle/index',
     'pages/useThrottleFn/index',
+    'pages/useLatest/index',
+    'pages/useUnmount/index',
     // layout
     'pages/useBackground/index',
     'pages/useTabBar/index',

packages/app/src/constant/index.ts

@@ -145,6 +145,14 @@ export const ChildrenList: { [_: string]: APIChildrenItem[] } = {
       id: 'useThrottleFn',
       name: 'useThrottleFn 节流函数',
     },
+    {
+      id: 'useLatest',
+      name: 'useLatest 返回最新值',
+    },
+    {
+      id: 'useUnmount',
+      name: 'useUnmount 卸载执行',
+    },
   ],
   [APIChildrenName.layout]: [
     {

packages/app/src/pages/useLatest/index.config.ts

@@ -0,0 +1,4 @@
+export default {
+  navigationBarTitleText: 'useLatest',
+  enableShareAppMessage: true,
+};

packages/app/src/pages/useLatest/index.tsx

@@ -0,0 +1,28 @@
+/**
+ * title: 基础用法
+ * desc: useLatest 返回的永远是最新值
+ */
+import React, { useState, useEffect } from 'react';
+import { View } from '@tarojs/components';
+
+import DocPage from '@components/DocPage';
+import { useLatest } from 'taro-hooks';
+
+export default () => {
+  const [count, setCount] = useState(0);
+
+  const latestCountRef = useLatest(count);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCount(latestCountRef.current + 1);
+    }, 1000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <DocPage title="useLatest 使用最新值" panelTitle="useLatest">
+      <View>count: {count}</View>
+    </DocPage>
+  );
+};

packages/app/src/pages/useUnmount/index.config.ts

@@ -0,0 +1,4 @@
+export default {
+  navigationBarTitleText: 'useUnmount',
+  enableShareAppMessage: true,
+};

packages/app/src/pages/useUnmount/index.tsx

@@ -0,0 +1,36 @@
+/**
+ * title: 基础用法
+ * desc: 在组件卸载时，执行函数。
+ */
+import React, { useState } from 'react';
+import { View } from '@tarojs/components';
+import { AtMessage, AtButton } from 'taro-ui';
+import Taro from '@tarojs/taro';
+
+import DocPage from '@components/DocPage';
+import { useUnmount } from 'taro-hooks';
+
+const MyComponent = () => {
+  useUnmount(() => {
+    Taro.atMessage({
+      type: 'info',
+      message: 'unmount',
+    });
+  });
+
+  return <View className="gap">Hello World!</View>;
+};
+
+export default () => {
+  const [state, toggle] = useState(true);
+
+  return (
+    <DocPage title="useUnmount 组件卸载时执行" panelTitle="useUnmount">
+      <AtMessage />
+      <AtButton type="primary" onClick={() => toggle(!state)}>
+        {state ? 'unmount' : 'mount'}
+      </AtButton>
+      {state && <MyComponent />}
+    </DocPage>
+  );
+};

packages/hooks/package.json

@@ -48,7 +48,6 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.14.6",
-    "ahooks": "^3.1.1",
     "compressorjs": "^1.0.7",
     "lodash-wechat": "^1.0.0",
     "lodash.uniq": "^4.5.0",

packages/hooks/src/index.ts

@@ -19,6 +19,8 @@ import useDebounce from './useDebounce';
 import useDebounceFn from './useDebounceFn';
 import useThrottle from './useThrottle';
 import useThrottleFn from './useThrottleFn';
+import useLatest from './useLatest';
+import useUnmount from './useUnmount';
 
 // layout
 import useBackground from './useBackground';
@@ -82,6 +84,8 @@ export {
   useDebounceFn,
   useThrottle,
   useThrottleFn,
+  useLatest,
+  useUnmount,
   usePromise,
   useBase64ToArrayBuffer,
   useArrayBufferToBase64,

packages/hooks/src/useDebounceFn/index.ts

@@ -1,7 +1,8 @@
 import { debounce } from 'lodash-wechat';
 import { useMemo } from 'react';
 import type { DebounceOptions } from '../useDebounce/debounceOptions';
-import { useLatest, useUnmount } from 'ahooks';
+import useLatest from '../useLatest';
+import useUnmount from '../useUnmount';
 
 type noop = (...args: any) => any;
 

packages/hooks/src/useLatest/index.md

@@ -0,0 +1,42 @@
+---
+title: useLatest
+nav:
+  title: Hooks
+  path: /hooks
+  order: 2
+group:
+  title: 基础
+  path: /basic
+---
+
+<Alert>注意: 该 Hook 是来自<a target="__blank" href="https://ahooks.js.org/zh-CN/hooks/use-latest">ahook useLatest</a>. 主要是为了分离主包</Alert>
+
+# useLatest
+
+返回当前最新值的 Hook，可以避免闭包问题。
+
+## 何时使用
+
+当需获取最新值时。
+
+## API
+
+```typescript
+const latestValueRef = useLatest<T>(value: T): MutableRefObject<T>;
+```
+
+### Params
+
+| 参数  | 说明     | 类型 | 默认值 |
+| ----- | -------- | ---- | ------ |
+| value | 获取的值 | `T`  | -      |
+
+## 代码演示
+
+<code src="@pages/useLatest" />
+
+## Hook 支持度
+
+| 微信小程序 | H5  | ReactNative |
+| :--------: | :-: | :---------: |
+|     ✔️     | ✔️  |     ✔️      |

packages/hooks/src/useLatest/index.ts

@@ -0,0 +1,10 @@
+import { useRef } from 'react';
+
+function useLatest<T>(value: T) {
+  const ref = useRef(value);
+  ref.current = value;
+
+  return ref;
+}
+
+export default useLatest;

packages/hooks/src/useThrottleFn/index.ts

@@ -1,6 +1,7 @@
 import { throttle } from 'lodash-wechat';
 import { useMemo } from 'react';
-import { useLatest, useUnmount } from 'ahooks';
+import useLatest from '../useLatest';
+import useUnmount from '../useUnmount';
 import type { ThrottleOptions } from '../useThrottle/throttleOptions';
 
 type noop = (...args: any) => any;

packages/hooks/src/useUnmount/index.md

@@ -0,0 +1,42 @@
+---
+title: useUnmount
+nav:
+  title: Hooks
+  path: /hooks
+  order: 2
+group:
+  title: 基础
+  path: /basic
+---
+
+<Alert>注意: 该 Hook 是来自<a target="__blank" href="https://ahooks.js.org/zh-CN/hooks/use-unmount">ahook useUnmount</a>. 主要是为了分离主包</Alert>
+
+# useUnmount
+
+在组件卸载（unmount）时执行的 Hook。
+
+## 何时使用
+
+当需监听组件卸载时
+
+## API
+
+```typescript
+useUnmount(fn: () => void);
+```
+
+### Params
+
+| 参数 | 说明                 | 类型         | 默认值 |
+| ---- | -------------------- | ------------ | ------ |
+| fn   | 组件卸载时执行的函数 | `() => void` | -      |
+
+## 代码演示
+
+<code src="@pages/useUnmount" />
+
+## Hook 支持度
+
+| 微信小程序 | H5  | ReactNative |
+| :--------: | :-: | :---------: |
+|     ✔️     | ✔️  |     ✔️      |

packages/hooks/src/useUnmount/index.ts

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+import useLatest from '../useLatest';
+
+const useUnmount = (fn: () => void) => {
+  if (process.env.NODE_ENV === 'development') {
+    if (typeof fn !== 'function') {
+      console.error(
+        `useUnmount expected parameter is a function, got ${typeof fn}`,
+      );
+    }
+  }
+
+  const fnRef = useLatest(fn);
+
+  useEffect(
+    () => () => {
+      fnRef.current();
+    },
+    [],
+  );
+};
+
+export default useUnmount;