🎈 perf(购物页面): 优化购物页面的删除功能

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<PropsType> = 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 (
     <MCheckbox
       status={state?.multipleSelection?.hasOwnProperty(itemData.id) || false}
@@ -98,7 +101,9 @@ let ColorKindItem: FC<PropsType> = props => {
       customClassName={classnames(styles.checkbox, state?.multipleSelection?.hasOwnProperty(itemData.id) ? styles.selected : '')}
       customTextClass={styles.colorKindItem}>
       <View className={styles['colorKindItem__left']}>
-        <Image className={styles['colorKindItem__left--image']} mode='aspectFill' src={formatImgUrl(itemData.product_color_texture_url)}></Image>
+        <LabAndImg value={labAndImgObj(itemData)} />
+
+        {/* <Image className={styles['colorKindItem__left--image']} mode='aspectFill' src={formatImgUrl(itemData.product_color_texture_url)}></Image> */}
       </View>
       <View className={styles['colorKindItem__center']}>
         <Text className={styles['colorKindItem__center--title']}>

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<PropsType> = 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<PropsType> = props => {
             ),
           },
         })
-        setItemData(res.data[0])
+        setItemData(() => res.data[0])
       }
     })
     // 取消订阅
@@ -276,7 +282,7 @@ interface GoodsListPropType {
   startTransition: React.TransitionStartFunction
 }
 const GoodsList = memo<GoodsListPropType>(props => {
-  console.log('Rerender component: GoodsList', props.multipleSelection)
+  console.log('Rerender component: GoodsList', props)
   const { itemData, selected, isPending, startTransition, multipleSelection } = props
 
   const currentSelected = useRef<EnumSaleMode | null>(null)
@@ -355,6 +361,10 @@ const GoodsList = memo<GoodsListPropType>(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
     }

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<InternalContainer> = () => {
     })()
   }, [])
 
-
   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<InternalContainer> = () => {
           if (res.success) {
             alert.success('删除成功')
             fetchData(searchOptions)
+            // Observer.notify(currentCheckedPurchaserId)
           } else {
             alert.none(res.msg)
           }
@@ -207,6 +210,7 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
       setRefreshStatus(false)
     }
   }
+  // const [isPending, startTransition] = useTransition()
 
   return (
     <View className={classnames('flex-col', styles.shopping)} id='shoppingContainer'>
@@ -224,10 +228,16 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
       <View className={classnames('flex-item', 'flex-col', styles['shopping--context'])}>
         <View id='shoppingListContainer' className={classnames(styles.shopping__list__container, 'flex-item')} style={{ height: listHeightRef.current }}>
           <InfiniteScroll statusMore={statusMore} refresherEnabled={true} selfOnRefresherRefresh={handleRefresh} refresherTriggered={refreshStatus}>
-            {!!shoppingCartData?.list?.length &&
+            {
+            // isPending ? (
+            //   null
+            // ) : (
+              !!shoppingCartData?.list?.length &&
               shoppingCartData?.list?.map((item, index) => {
                 return <ItemList itemData={item} key={index}></ItemList>
-              })}
+              })
+            // )
+            }
           </InfiniteScroll>
         </View>
       </View>

src/use/useCommon.ts

@@ -167,7 +167,7 @@ export function usePropsValue<T>(options: UsePropsValueOptions<T>) {
   }
 
   const setState = useCallback((v: SetStateAction<T>, 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