chore: add two hooks

src/app.tsx

@@ -20,7 +20,7 @@ class App extends Component {
    * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
    */
   config: Config = {
-    pages: ['pages/index/index'],
+    pages: ['pages/index/index', 'pages/demo/demo'],
     window: {
       backgroundTextStyle: 'light',
       navigationBarBackgroundColor: '#fff',

src/hooks/useToggle.ts

@@ -0,0 +1,25 @@
+import { useState, useCallback } from '@tarojs/taro';
+
+/**
+ * 切换 boolean 状态值
+ *
+ * @param initialValue
+ */
+function useToggle(initialValue: boolean): [boolean, (nextValue?: any) => void] {
+  const [value, setValue] = useState<boolean>(initialValue);
+
+  const toggle = useCallback(
+    (nextValue?: any) => {
+      if (typeof nextValue === 'boolean') {
+        setValue(nextValue);
+      } else {
+        setValue(currentValue => !currentValue);
+      }
+    },
+    [setValue]
+  );
+
+  return [value, toggle];
+}
+
+export default useToggle;

src/hooks/useUnload.ts

@@ -0,0 +1,18 @@
+import { useEffect, useCallback } from '@tarojs/taro';
+
+/**
+ * 页面/组件卸载时的回调
+ *
+ * @param callback
+ */
+function useUnload(callback: () => void) {
+  const memoizedCb = useCallback(callback, []);
+
+  useEffect(() => {
+    return () => {
+      memoizedCb();
+    };
+  }, [memoizedCb]);
+}
+
+export default useUnload;

src/pages/demo/demo.tsx

@@ -0,0 +1,26 @@
+import Taro from '@tarojs/taro';
+import { View, Button } from '@tarojs/components';
+import { useSelector, useDispatch } from '@tarojs/redux';
+import { RootState } from '~/redux/rootReducer';
+import { increment } from '~/redux/slices/count';
+import useUnload from '~/hooks/useUnload';
+
+const Demo: Taro.FC = () => {
+  const dispatch = useDispatch();
+  const count = useSelector((state: RootState) => state.count);
+
+  useUnload(() => {
+    console.log('demo unload');
+  });
+
+  return (
+    <View>
+      <View>{count}</View>
+      <Button type='primary' onClick={() => dispatch(increment(2))}>
+        +
+      </Button>
+    </View>
+  );
+};
+
+export default Demo;

src/pages/index/index.tsx

@@ -3,6 +3,7 @@ import { useSelector, useDispatch } from '@tarojs/redux';
 import { View, Button, Input, Image } from '@tarojs/components';
 import { CommonEventFunction } from '@tarojs/components/types/common';
 
+import useUnload from '~/hooks/useUnload';
 import { RootState } from '~/redux/rootReducer';
 import { increment, decrement, asyncIncrement, asyncDecrement } from '~/redux/slices/count';
 import { addTodo, deleteTodo, toggleTodo } from '~/redux/slices/todos';
@@ -32,6 +33,10 @@ const Index: Taro.FC = () => {
     }
   };
 
+  useUnload(() => {
+    console.log('index unload');
+  });
+
   return (
     <View className='index'>
       <Image className='icon' src={warningIcon} />
@@ -76,6 +81,9 @@ const Index: Taro.FC = () => {
           </View>
         ))}
       </View>
+      <Button type='primary' onClick={() => Taro.navigateTo({ url: '/pages/demo/demo' })}>
+        To Demo
+      </Button>
     </View>
   );
 };