From c0d3f6180675a343c03f87ddd6c41300c538b4b5 Mon Sep 17 00:00:00 2001 From: xuan Date: Fri, 28 Oct 2022 16:28:58 +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=E4=BC=98=E5=8C=96=E8=B4=AD=E7=89=A9=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E7=9A=84=E5=88=A0=E9=99=A4=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/colorKindItem/index.tsx | 11 ++++++++--- .../components/shoppingCartItem/index.tsx | 16 +++++++++++++--- src/pages/shopping/index.tsx | 18 ++++++++++++++---- src/use/useCommon.ts | 2 +- 4 files changed, 36 insertions(+), 11 deletions(-) diff --git a/src/pages/shopping/components/colorKindItem/index.tsx b/src/pages/shopping/components/colorKindItem/index.tsx index 45411ec..e0cb12d 100644 --- a/src/pages/shopping/components/colorKindItem/index.tsx +++ b/src/pages/shopping/components/colorKindItem/index.tsx @@ -1,7 +1,7 @@ import { View, Text, Image } from '@tarojs/components' import MCheckbox from '@/components/checkbox' import Counter from '@/components/counter' -import { FC, forwardRef, memo } from 'react' +import { FC, forwardRef, memo, useCallback } from 'react' import classnames from 'classnames' import styles from './index.module.scss' import { debounce } from '@/common/util' @@ -11,6 +11,7 @@ import { selectList } from '../../config' import { AdjestShoppingCartApi } from '@/api/shopping/index' import { Goods, ShoppingDispatchType, ShoppingStateContextValue, useShoppingDispatch, useShoppingState } from '../../context' import { ShoppingStore } from '../../context/shoppingStore' +import LabAndImg from '@/components/LabAndImg' type PropsType = { state?: { @@ -89,7 +90,9 @@ let ColorKindItem: FC = props => { state?.Observer?.notify(purchaserId) } }, 400) - + const labAndImgObj = useCallback(item => { + return { lab: item.lab, rgb: item.rgb, texture_url: item.product_color_texture_url } + }, []) return ( = props => { customClassName={classnames(styles.checkbox, state?.multipleSelection?.hasOwnProperty(itemData.id) ? styles.selected : '')} customTextClass={styles.colorKindItem}> - + + + {/* */} diff --git a/src/pages/shopping/components/shoppingCartItem/index.tsx b/src/pages/shopping/components/shoppingCartItem/index.tsx index 11ae848..9af7f46 100644 --- a/src/pages/shopping/components/shoppingCartItem/index.tsx +++ b/src/pages/shopping/components/shoppingCartItem/index.tsx @@ -16,6 +16,7 @@ import classNames from 'classnames' import LoadingCard from '@/components/loadingCard' import { ShoppingCartListApi } from '@/api' import { ShoppingStore } from '../../context/shoppingStore' +import { usePropsValue } from '@/use/useCommon' interface ButtonPropsType { isActive: boolean @@ -61,7 +62,12 @@ type PropsType = { let ShoppingCartItem: FC = props => { const { state } = props - const [itemData, setItemData] = useState(props.itemData) + console.log('props ShoppingCartItem', props) + + const [itemData, setItemData] = usePropsValue({ + value: props.itemData, + defaultValue: props.itemData, + }) const { multipleSelection, currentCheckedPurchaserId } = state! const dispatch = useShoppingDispatch() @@ -184,7 +190,7 @@ let ShoppingCartItem: FC = props => { ), }, }) - setItemData(res.data[0]) + setItemData(() => res.data[0]) } }) // 取消订阅 @@ -276,7 +282,7 @@ interface GoodsListPropType { startTransition: React.TransitionStartFunction } const GoodsList = memo(props => { - console.log('Rerender component: GoodsList', props.multipleSelection) + console.log('Rerender component: GoodsList', props) const { itemData, selected, isPending, startTransition, multipleSelection } = props const currentSelected = useRef(null) @@ -355,6 +361,10 @@ const GoodsList = memo(props => { const withStateSlice = (comp, slice) => { const MemoComp = memo(comp, (prevProps, nextProps) => { let needMemo = true + console.log('---------------props-----------------------') + console.log('props prevProps==>', prevProps.itemData) + console.log('props nextProps==>', nextProps.itemData) + console.log('-----------------props---------------------') if (JSON.stringify(prevProps.itemData) !== JSON.stringify(nextProps.itemData)) { needMemo = false } diff --git a/src/pages/shopping/index.tsx b/src/pages/shopping/index.tsx index 3d8bee4..e571277 100644 --- a/src/pages/shopping/index.tsx +++ b/src/pages/shopping/index.tsx @@ -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(() => { // 计算总的预估金额 @@ -122,10 +123,11 @@ const ShoppingCartContainer: FC = () => { })() }, []) - useEffect(() => { if (state.success) { - setShoppingCartData({ list: state.data, total: state.data.length }) + // startTransition(() => { + setShoppingCartData({ list: state.data, total: state.data.length }) + // }) } }, [state]) @@ -165,6 +167,7 @@ const ShoppingCartContainer: FC = () => { if (res.success) { alert.success('删除成功') fetchData(searchOptions) + // Observer.notify(currentCheckedPurchaserId) } else { alert.none(res.msg) } @@ -207,6 +210,7 @@ const ShoppingCartContainer: FC = () => { setRefreshStatus(false) } } + // const [isPending, startTransition] = useTransition() return ( @@ -224,10 +228,16 @@ const ShoppingCartContainer: FC = () => { - {!!shoppingCartData?.list?.length && + { + // isPending ? ( + // null + // ) : ( + !!shoppingCartData?.list?.length && shoppingCartData?.list?.map((item, index) => { return - })} + }) + // ) + } diff --git a/src/use/useCommon.ts b/src/use/useCommon.ts index 1217ad8..0b994e1 100644 --- a/src/use/useCommon.ts +++ b/src/use/useCommon.ts @@ -167,7 +167,7 @@ export function usePropsValue(options: UsePropsValueOptions) { } const setState = useCallback((v: SetStateAction, forceTrigger: boolean = false) => { - // `forceTrigger` means trigger `onChange` even if `v` is the same as `stateRef.current` + // `forceTrigger` 意思是 触发 `onChange` 不管 `v` 是否和 `stateRef.current` 相等 const nextValue = typeof v === 'function' ? (v as (prevState: T) => T)(stateRef.current) : v if (!forceTrigger && nextValue === stateRef.current) return stateRef.current = nextValue