🎈 perf(优化购物车勾选):

This commit is contained in:
czm 2023-01-13 23:08:54 +08:00
parent e0ce4f5b56
commit f24ff9d6c1
4 changed files with 16 additions and 11 deletions

View File

@ -15,6 +15,7 @@
"react/display-name": "off", "react/display-name": "off",
"no-use-before-define": "off", "no-use-before-define": "off",
"@typescript-eslint/no-use-before-define": "warn", "@typescript-eslint/no-use-before-define": "warn",
"array-callback-return": 0 "array-callback-return": 0,
"react/prop-types": 0
} }
} }

View File

@ -1,4 +1,4 @@
// export const BASE_URL = CURRENT_BASE_URL export const BASE_URL = CURRENT_BASE_URL
// export const BASE_URL = `http://192.168.0.75:50001/lymarket` // export const BASE_URL = `http://192.168.0.75:50001/lymarket`
// export const BASE_URL = `http://192.168.0.89:50001/lymarket` // export const BASE_URL = `http://192.168.0.89:50001/lymarket`
// export const BASE_URL = `http://10.0.0.5:50001/lymarket` // export const BASE_URL = `http://10.0.0.5:50001/lymarket`
@ -14,7 +14,7 @@
// export const BASE_URL = `http://192.168.1.5:40001/lymarket` // 王霞 // export const BASE_URL = `http://192.168.1.5:40001/lymarket` // 王霞
// export const BASE_URL = 'http://192.168.1.7:50002/lymarket' // 添 // export const BASE_URL = 'http://192.168.1.7:50002/lymarket' // 添
// export const BASE_URL = 'http://192.168.1.28:50001/lymarket' // 婷 // export const BASE_URL = 'http://192.168.1.28:50001/lymarket' // 婷
export const BASE_URL = 'http://192.168.1.42:50002/lymarket' // 杰 // export const BASE_URL = 'http://192.168.1.42:50002/lymarket' // 杰
// CDN // CDN
// 生成密钥 // 生成密钥

View File

@ -1,4 +1,4 @@
import { memo, useCallback } from 'react' import { forwardRef, memo, useCallback, useImperativeHandle } from 'react'
import MCheckbox from '@/components/checkbox' import MCheckbox from '@/components/checkbox'
import type { ColorType, ProductType } from '@/context/ContextShop' import type { ColorType, ProductType } from '@/context/ContextShop'
import { useCurrenShop } from '@/context/ContextShop' import { useCurrenShop } from '@/context/ContextShop'
@ -10,19 +10,21 @@ interface IndexType {
onSelect?: (val: boolean) => void onSelect?: (val: boolean) => void
checkStatus: boolean checkStatus: boolean
} }
export default memo((props: ParamType) => { export default memo(forwardRef((props: ParamType, ref) => {
const { colorItem } = props const { colorItem } = props
const { state, dispatch } = useCurrenShop() const { state, dispatch } = useCurrenShop()
const indexs = colorItem.index_str.split(',') const indexs = colorItem.index_str.split(',')
const onSelect = useCallback((status) => { const onSelect = useCallback((status) => {
state.list[indexs[0]].color_list[indexs[1]].checked = status state.list[indexs[0]].color_list[indexs[1]].checked = !state.list[indexs[0]].color_list[indexs[1]].checked
const tf = state.list[indexs[0]].color_list.some(item => item.checked) const tf = state.list[indexs[0]].color_list.some(item => item.checked)
state.list[indexs[0]].checked = tf state.list[indexs[0]].checked = tf
dispatch({ type: 'updateProduct', data: { list: state.list } }) dispatch({ type: 'updateProduct', data: { list: state.list } })
}, [state.list[indexs[0]].color_list[indexs[1]].checked]) }, [state.list[indexs[0]].color_list[indexs[1]].checked])
useImperativeHandle(ref, () => ({
onSelect,
}))
return <Index checkStatus={state.list[indexs[0]].color_list[indexs[1]].checked} onSelect={onSelect} /> return <Index checkStatus={state.list[indexs[0]].color_list[indexs[1]].checked} onSelect={onSelect} />
}) }))
const Index = memo((props: IndexType) => { const Index = memo((props: IndexType) => {
const { checkStatus, onSelect } = props const { checkStatus, onSelect } = props

View File

@ -1,6 +1,6 @@
import { CustomWrapper, Text, View } from '@tarojs/components' import { CustomWrapper, Text, View } from '@tarojs/components'
import Taro from '@tarojs/taro' import Taro from '@tarojs/taro'
import { memo, useCallback, useEffect, useMemo, useState } from 'react' import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import Big from 'big.js' import Big from 'big.js'
import ColorCheckbox from '../colorCheckbox' import ColorCheckbox from '../colorCheckbox'
import RecommendProduct from '../recommendProduct' import RecommendProduct from '../recommendProduct'
@ -92,11 +92,13 @@ const Index = memo((props: IndexItemType) => {
return selectList[colorItem.sale_mode] return selectList[colorItem.sale_mode]
}, [colorItem]) }, [colorItem])
console.log('colorItem::', colorItem) console.log('colorItem::', colorItem)
const checkBoxRef = useRef<any>(null)
return <> return <>
<View className={styles.shop_product_item_con}> <View className={styles.shop_product_item_con}>
<View className={styles.shop_product_item}> <View className={styles.shop_product_item}>
<ColorCheckbox colorItem={colorItem} /> <ColorCheckbox colorItem={colorItem} ref={checkBoxRef} />
<View className={styles.item_con}> <View className={styles.item_con} onClick={() => checkBoxRef.current.onSelect()}>
<View className={styles.img}> <View className={styles.img}>
<LabAndImg value={rga}></LabAndImg> <LabAndImg value={rga}></LabAndImg>
</View> </View>