docs(useloadmore): add docs for useloadmore

Author: innocces

packages/app/src/app.config.ts

@@ -31,6 +31,9 @@ export default {
     'pages/useRequest/refreshDeps/index',
     'pages/useRequest/fetch/index',
     'pages/useRequest/axios/index',
+    'pages/useRequest/pagination/index',
+    'pages/useRequest/paginationCache/index',
+    'pages/useRequest/loadMore/index',
     'pages/useNetworkType/index',
     'pages/useOnline/index',
   ],

packages/app/src/components/DocPage/index.tsx

@@ -1,4 +1,9 @@
-import React, { useEffect } from 'react';
+import React, {
+  useEffect,
+  forwardRef,
+  CSSProperties,
+  ForwardedRef,
+} from 'react';
 import Taro, { PropsWithChildren } from '@tarojs/taro';
 
 import { useEvent } from 'taro-hooks';
@@ -12,9 +17,17 @@ import './index.less';
 export type IDocPageProps = PropsWithChildren<{
   title?: string;
   panelTitle?: string;
+  style?: CSSProperties;
+  forwardedRef: ForwardedRef<unknown>;
 }>;
 
-const DocPage = ({ children, title, panelTitle }: IDocPageProps) => {
+const DocPage = ({
+  children,
+  title,
+  panelTitle,
+  style,
+  forwardedRef,
+}: IDocPageProps) => {
   // fix runtime change problem
   const [state, { emitEvent }] = useEvent('');
 
@@ -25,7 +38,7 @@ const DocPage = ({ children, title, panelTitle }: IDocPageProps) => {
   }, [emitEvent]);
 
   return (
-    <View className="page">
+    <View className="page" ref={forwardedRef} style={style}>
       <DocHeader title={title} />
       <View className="doc-body">
         <View className="panel">
@@ -37,4 +50,6 @@ const DocPage = ({ children, title, panelTitle }: IDocPageProps) => {
   );
 };
 
-export default DocPage;
+export default forwardRef((props, ref) => (
+  <DocPage {...props} forwardedRef={ref} />
+));

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

@@ -93,6 +93,16 @@ const list: IListItem[] = [
     note: '普通的分页场景，我们会自动管理 current 和 pageSize。',
     route: 'pagination',
   },
+  {
+    title: '缓存分页',
+    note: '在 cacheKey 场景下， run 的参数 params 是可以缓存的，利用这个特点，我们可以实现 pagination 相关条件的缓存。',
+    route: 'paginationCache',
+  },
+  {
+    title: '缓存加载更多',
+    note: '通过设置 cacheKey，可以缓存所有 list 数据。',
+    route: 'loadMore',
+  },
 ];
 
 export default () => {

packages/app/src/pages/useRequest/loadMore/index.tsx

@@ -56,7 +56,7 @@ const LoadMoreRequest = () => {
   );
 
   return (
-    <DocPage title="useRequest 请求" panelTitle="依赖请求">
+    <DocPage title="useRequest 普通加载更多" panelTitle="普通加载更多">
       <View>
         You can click the button multiple times, the loadmore will be cached.
       </View>

packages/app/src/pages/useRequest/paginationCache/index.tsx

@@ -1,5 +1,5 @@
 /**
- * desc: 普通的分页场景，我们会自动管理 `current` 和 `pageSize`。
+ * desc: 在 `cacheKey` 场景下， `run` 的参数 `params` 是可以缓存的，利用这个特点，我们可以实现 pagination 相关条件的缓存。
  */
 import React, { useState } from 'react';
 import { useBoolean, useUpdateEffect } from 'ahooks';