From ea6c45e560164bf5959134985f7aa4e90f0b70cb Mon Sep 17 00:00:00 2001 From: xuan Date: Wed, 19 Oct 2022 11:02:19 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=88=20perf(=E8=B4=AD=E7=89=A9=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2):=20=E6=94=B9=E5=96=84=E6=BB=9A=E5=8A=A8=E5=88=97?= =?UTF-8?q?=E8=A1=A8=E7=9A=84=E5=8A=A0=E8=BD=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/util.ts | 29 ++++++++++++------------ src/components/infiniteScroll/index.tsx | 30 ++++++++++++------------- src/pages/shopping/index.tsx | 21 ++++++++++++----- src/use/useHttp.ts | 2 +- 4 files changed, 47 insertions(+), 35 deletions(-) diff --git a/src/common/util.ts b/src/common/util.ts index 4521389..09195f6 100644 --- a/src/common/util.ts +++ b/src/common/util.ts @@ -61,16 +61,16 @@ export const getFilterData = (val = {}, arr: string[] = []) => { * @param {*} object * @returns */ -export const copyObject = (object) => { +export const copyObject = object => { if (object.constructor == Object) { let keys = Object.keys(object) let newObject = {} - keys.map((key) => { + keys.map(key => { newObject[key] = copyObject(object[key]) }) return newObject } else if (object.constructor == Array) { - return object.map((item) => { + return object.map(item => { return copyObject(item) }) } else { @@ -93,9 +93,17 @@ export const copyObject = (object) => { export const screenshot = (url, suffix = '!w200') => { return url + suffix } - +interface DataLoadingStatus { + list: any[] + total: number + status: boolean +} //获取数据加载状态 //0:数据从无到有加载数据，1，没有任何数据， 2：下拉加载，3：下拉没有数据 -export const dataLoadingStatus = ({ list = [], total = 0, status = false }: { list: any[]; total: number; status: true | false }) => { +export const dataLoadingStatus = ({ list = [], total = 0, status = true }: DataLoadingStatus) => { + // 类型校验 + if (Object.prototype.toString.call(list) !== '[object Array]') { + list = [] + } if (list.length == 0 && status) { return 0 } else if (list.length == 0 && !status) { @@ -107,7 +115,6 @@ export const dataLoadingStatus = ({ list = [], total = 0, status = false }: { li } } - function delay(delayTime = 25): Promise { return new Promise(resolve => { setTimeout(() => { @@ -117,10 +124,7 @@ function delay(delayTime = 25): Promise { }) } -export function delayQuerySelector( - selectorStr: string, - delayTime = 500 -): Promise { +export function delayQuerySelector(selectorStr: string, delayTime = 500): Promise { return new Promise(resolve => { const selector: SelectorQuery = Taro.createSelectorQuery() delay(delayTime).then(() => { @@ -134,7 +138,6 @@ export function delayQuerySelector( }) } - //全局分享监听 export const shareShop = () => { const page = Taro.getCurrentInstance().page @@ -143,7 +146,7 @@ export const shareShop = () => { analysisShortCodeApi(page.options.share) } if (page && page.onShareAppMessage) { - page.onShareAppMessage = (res) => { + page.onShareAppMessage = res => { let path = '' let title = '' let imageUrl = '' @@ -170,5 +173,3 @@ export const shareShop = () => { } } } - - diff --git a/src/components/infiniteScroll/index.tsx b/src/components/infiniteScroll/index.tsx index 49bf54a..f794bec 100644 --- a/src/components/infiniteScroll/index.tsx +++ b/src/components/infiniteScroll/index.tsx @@ -1,10 +1,10 @@ -import { ScrollView, View } from "@tarojs/components" -import React, { memo, ReactNode, useMemo, useState } from "react" -import style from "./index.module.scss" -import DotLoading from "@/components/dotLoading" -import LoadingCard from "../loadingCard" +import { ScrollView, View } from '@tarojs/components' +import React, { memo, ReactNode, useMemo, useState } from 'react' +import style from './index.module.scss' +import DotLoading from '@/components/dotLoading' +import LoadingCard from '../loadingCard' -export type StatusParam = 0|1|2|3 +export type StatusParam = 0 | 1 | 2 | 3 type Params = { styleObj?: React.CSSProperties @@ -36,7 +36,7 @@ export default memo( selfOnRefresherRefresh, selfOnRefresherRestore, selfOnRefresherAbort, - safeAreaInsetBottom=true, + safeAreaInsetBottom = true, enableLoadMoreStatus = true, children, lowerThresholdNum = 5, @@ -76,28 +76,29 @@ export default memo( } }, [statusMore]) - const component = () => { - if(enableLoadMoreStatus){ - if (!moreStatus){ + if (enableLoadMoreStatus) { + if (!moreStatus) { return ( {children} ) - }else{ + } else { return ( <> {(statusMore == 2 || statusMore == 3) && ( {children} - {(statusMore == 2 && ( + {statusMore == 2 ? ( 加载中 - )) || 没有更多数据了} + ) : ( + 没有更多数据了 + )} )} @@ -106,8 +107,7 @@ export default memo( ) } - - }else{ + } else { return ( {children} diff --git a/src/pages/shopping/index.tsx b/src/pages/shopping/index.tsx index a8e36c3..9eb3483 100644 --- a/src/pages/shopping/index.tsx +++ b/src/pages/shopping/index.tsx @@ -1,7 +1,7 @@ import Search from '@/components/search' import { View } from '@tarojs/components' import Taro, { useDidShow } from '@tarojs/taro' -import { FC, memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react' +import { FC, memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useTransition } from 'react' import styles from './index.module.scss' import classnames from 'classnames' import IconText from '@/components/iconText' @@ -15,6 +15,7 @@ import { dataLoadingStatus, debounce, getFilterData } from '@/common/util' import { ShoppingProvider } from './components/shoppingCart/index' import { Goods, ShoppingDispatchType, useShoppingDispatch, useShoppingState } from './context' import { alert, goLink, isEmptyObject } from '@/common/common' +import LoadingCard from '@/components/loadingCard' export const Shopping: FC = memo(() => { // 计算总的预估金额 @@ -87,7 +88,9 @@ const ShoppingCartContainer: FC = () => { //数据加载状态 const statusMore = useMemo(() => { - return dataLoadingStatus({ list: shoppingCartData.list, total: shoppingCartData.total, status: state.loading }) + const status = dataLoadingStatus({ list: shoppingCartData.list, total: shoppingCartData.total, status: state.loading }) + console.log('status==>', status) + return status }, [shoppingCartData, state]) // useLayoutEffect 执行在DOM更新之后，浏览器绘制之前 如果放在 useEffect 里面会产生多一次不必要的回流和重绘，可能会引起视图闪现 @@ -112,8 +115,12 @@ const ShoppingCartContainer: FC = () => { })() }, []) + const [isPending, startTransition] = useTransition() + useEffect(() => { - setShoppingCartData({ list: state.data, total: state.data.length }) + startTransition(() => { + setShoppingCartData({ list: state.data, total: state.data.length }) + }) }, [state]) // 结算 @@ -228,10 +235,14 @@ const ShoppingCartContainer: FC = () => { - {!!shoppingCartData?.list?.length && + {isPending ? ( + + ) : ( + !!shoppingCartData?.list?.length && shoppingCartData?.list?.map((item, index) => { return - })} + }) + )} diff --git a/src/use/useHttp.ts b/src/use/useHttp.ts index 4ce0db3..5dd7418 100644 --- a/src/use/useHttp.ts +++ b/src/use/useHttp.ts @@ -110,7 +110,7 @@ export const useRequest = ( success: false, // 请求是否成功 data: {}, msg: '', - loading: false, + loading: true, error: null, query: {}, filter: null,