From 566f42905157d500a9c6222c8376e448c460c43e Mon Sep 17 00:00:00 2001
From: czm <2192718639@qq.com>
Date: Thu, 24 Nov 2022 13:51:42 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=88=20perf(=E4=BC=98=E5=8C=96=E8=B4=AD?=
=?UTF-8?q?=E7=89=A9=E8=BD=A6):?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/counter/index copy.tsx | 136 ++++++++++++++++++++++
src/components/counter/index.module.scss | 86 +++++++-------
src/components/counter/index.tsx | 50 ++++----
src/components/counter/index1.module.scss | 37 ------
src/components/counter/index1.tsx | 107 -----------------
5 files changed, 208 insertions(+), 208 deletions(-)
create mode 100644 src/components/counter/index copy.tsx
delete mode 100644 src/components/counter/index1.module.scss
delete mode 100644 src/components/counter/index1.tsx
diff --git a/src/components/counter/index copy.tsx b/src/components/counter/index copy.tsx
new file mode 100644
index 0000000..5942901
--- /dev/null
+++ b/src/components/counter/index copy.tsx
@@ -0,0 +1,136 @@
+import { Input, View } from '@tarojs/components'
+import { memo, useEffect, useMemo, useRef, useState } from 'react'
+import Big from 'big.js'
+import styles from './index.module.scss'
+type params = {
+ minNum?: number //最小值
+ maxNum?: number //最大值
+ step?: number //步长
+ defaultNum?: number //默认值
+ digits?: number //多少位小数
+ onChange?: (val: number) => void
+ onBlue?: (val: number) => void //失去焦点触发
+ onClickBtn?: (val: number) => void
+ unit?: string
+ disable?: true | false //是否禁用
+}
+export default memo((props: params) => {
+ return
+})
+
+function areEqual(prevProps: params, nextProps: params) {
+ return (
+ prevProps.defaultNum == nextProps.defaultNum &&
+ prevProps.unit == nextProps.unit &&
+ prevProps.minNum == nextProps.minNum &&
+ prevProps.maxNum == nextProps.maxNum &&
+ prevProps.step == nextProps.step &&
+ prevProps.digits == nextProps.digits
+ )
+}
+const Counter = memo((props: params) => {
+ let { minNum = 0, maxNum = 10000, step = 1, digits = 0, defaultNum = 0, onChange, onBlue, onClickBtn, unit = '', disable = false } = props
+ const [value, setValue] = useState({ count: defaultNum })
+ // useEffect(() => {
+ // setValue({ count: defaultNum })
+ // }, [defaultNum])
+ console.log('1231231231231212')
+ const onPlus = () => {
+ if (disable) return false
+ let { count } = value
+ let num_res = Big(count).add(step).toNumber()
+ num_res = num_res >= maxNum ? maxNum : num_res
+ num_res = formatDigits(num_res)
+ // setValue({ ...value, count: num_res })
+ onChange?.(parseFloat(num_res))
+ onClickBtn?.(parseFloat(num_res))
+ }
+ const minus = () => {
+ if (disable) return false
+ let { count } = value
+ let num_res = Big(count).minus(step).toNumber()
+ num_res = num_res < minNum ? minNum : num_res
+ // setValue({ ...value, count: num_res })
+ onChange?.(parseFloat(num_res))
+ onClickBtn?.(parseFloat(num_res))
+ }
+
+ //保留小数
+ const formatDigits = (num) => {
+ num = num + ''
+ if (num.includes('.') && digits > 0) {
+ console.log('num::', num.includes('.'))
+ let res = num.split('.')
+ let last_num = res[1].substr(0, digits)
+ return res[0] + '.' + last_num
+ }
+ return parseFloat(num)
+ }
+
+ //检查数据
+ const checkData = (val) => {
+ let num = parseFloat(val)
+ if (num > maxNum) return maxNum
+ if (num < minNum) return minNum
+ return val
+ }
+
+ const onInputEven = (e) => {
+ // let res = e.detail.value
+ // if (res === '') {
+ // // setValue({ ...value, count: minNum })
+ // onChange?.(minNum)
+ // } else if (!isNaN(Number(res))) {
+ // let count = formatDigits(res)
+ // count = checkData(count)
+ // // setValue({ ...value, count })
+ // onChange?.(parseFloat(count as string))
+ // } else {
+ // let num = parseFloat(res)
+ // if (!isNaN(num)) {
+ // let count = formatDigits(num)
+ // count = checkData(count)
+ // // setValue({ ...value, count })
+ // onChange?.(count as number)
+ // } else {
+ // // setValue({ ...value, count: defaultNum })
+ // onChange?.(defaultNum)
+ // }
+ // }
+ }
+
+ const onBluerEven = (e) => {
+ let num = parseFloat(e.detail.value)
+ if (!isNaN(num)) {
+ let count = formatDigits(num)
+ count = checkData(count)
+ // setValue({ ...value, count })
+ onBlue?.(count as number)
+ } else {
+ // setValue({ ...value, count: defaultNum })
+ onBlue?.(minNum)
+ }
+ }
+ return (
+
+ minus()}>
+ -
+
+
+
+ {unit}
+
+ onPlus()}>
+ +
+
+
+ )
+}, areEqual)
diff --git a/src/components/counter/index.module.scss b/src/components/counter/index.module.scss
index 2748cef..0f73251 100644
--- a/src/components/counter/index.module.scss
+++ b/src/components/counter/index.module.scss
@@ -1,46 +1,44 @@
-
-.main{
+.main {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ .plus {
+ color: $color_main;
+ width: 46px;
+ height: 46px;
+ text-align: center;
+ line-height: 43px;
+ font-size: 50px;
+ background-color: $color_main;
+ color: #fff;
+ border-radius: 8px;
+ }
+ .reduce {
+ font-size: 50px;
+ width: 46px;
+ height: 46px;
+ text-align: center;
+ line-height: 43px;
+ color: #007aff;
+ }
+ .input {
display: flex;
- align-items: center;
- justify-content: space-between;
- width: 100%;
- .plus{
- color: $color_main;
- width: 46px;
- height: 46px;
- text-align: center;
- line-height: 43px;
- font-size: 50px;
- background-color: $color_main;
- color: #fff;
- border-radius: 8px;
+ align-items: flex-end;
+ background-color: #fff;
+ padding: 5px 10px;
+ box-sizing: border-box;
+ width: 106px;
+ border-radius: 10px;
+ input {
+ font-size: $font_size_medium;
+ // text-align: right;
+ padding-right: 10px;
}
- .reduce {
- font-size: 50px;
- width: 46px;
- height: 46px;
- text-align: center;
- line-height: 43px;
- color:#007AFF;
- }
- .input{
- display: flex;
- align-items: flex-end;
- background-color: #fff;
- padding: 5px 10px;
- box-sizing: border-box;
- width: 106px;
- border-radius: 10px;
- input{
- font-size: $font_size_medium;
- text-align: right;
- padding-right: 10px;
- }
- }
-
- .unit{
- font-size: $font_size_min;
- color: $color_font_two;
- }
-
-}
\ No newline at end of file
+ }
+
+ .unit {
+ font-size: $font_size_min;
+ color: $color_font_two;
+ }
+}
diff --git a/src/components/counter/index.tsx b/src/components/counter/index.tsx
index dbedc91..0ab764e 100644
--- a/src/components/counter/index.tsx
+++ b/src/components/counter/index.tsx
@@ -1,5 +1,5 @@
import { Input, View } from '@tarojs/components'
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { memo, useEffect, useMemo, useRef, useState } from 'react'
import Big from 'big.js'
import styles from './index.module.scss'
type params = {
@@ -12,14 +12,21 @@ type params = {
onBlue?: (val: number) => void //失去焦点触发
onClickBtn?: (val: number) => void
unit?: string
- disable?: true | false //是否禁用
+ disabled?: true | false //是否禁用
}
-export default ({ minNum = 0, maxNum = 10000, step = 1, digits = 0, defaultNum = 0, onChange, onBlue, onClickBtn, unit = '', disable = false }: params) => {
- const [value, setValue] = useState({ count: defaultNum })
+export default memo((props: params) => {
+ return
+})
+const Counter = memo((props: params) => {
+ let { minNum = 0, maxNum = 10000, step = 1, digits = 0, defaultNum = 0, onChange, onBlue, onClickBtn, unit = '', disabled = false } = props
+ const [value, setValue] = useState({ count: defaultNum })
+ useEffect(() => {
+ setValue({ count: defaultNum })
+ }, [defaultNum])
const onPlus = () => {
- if (disable) return false
- let { count } = value
+ if (disabled) return false
+ let count = value.count
let num_res = Big(count).add(step).toNumber()
num_res = num_res >= maxNum ? maxNum : num_res
num_res = formatDigits(num_res)
@@ -28,8 +35,8 @@ export default ({ minNum = 0, maxNum = 10000, step = 1, digits = 0, defaultNum =
onClickBtn?.(parseFloat(num_res))
}
const minus = () => {
- if (disable) return false
- let { count } = value
+ if (disabled) return false
+ let count = value.count
let num_res = Big(count).minus(step).toNumber()
num_res = num_res < minNum ? minNum : num_res
setValue({ ...value, count: num_res })
@@ -60,37 +67,40 @@ export default ({ minNum = 0, maxNum = 10000, step = 1, digits = 0, defaultNum =
const onInputEven = (e) => {
let res = e.detail.value
if (res === '') {
- setValue({ ...value, count: minNum })
+ // setValue({ ...value, count: minNum })
onChange?.(minNum)
} else if (!isNaN(Number(res))) {
let count = formatDigits(res)
count = checkData(count)
- setValue({ ...value, count })
+ // setValue({ ...value, count })
onChange?.(parseFloat(count as string))
} else {
let num = parseFloat(res)
if (!isNaN(num)) {
let count = formatDigits(num)
count = checkData(count)
- setValue({ ...value, count })
+ // setValue({ ...value, count })
onChange?.(count as number)
} else {
- setValue({ ...value, count: defaultNum })
+ // setValue({ ...value, count: defaultNum })
onChange?.(defaultNum)
}
}
}
- const onBluerEven = () => {
- let num = parseFloat(value.count)
- if (!isNaN(num)) {
+ const onBluerEven = (e) => {
+ let num = parseFloat(e.detail.value)
+ if (e.detail.value == '') {
+ onBlue?.(minNum)
+ setValue({ count: minNum })
+ } else if (!isNaN(num)) {
let count = formatDigits(num)
count = checkData(count)
- setValue({ ...value, count })
+ setValue({ count })
onBlue?.(count as number)
} else {
- setValue({ ...value, count: defaultNum })
- onBlue?.(defaultNum)
+ setValue({ count: minNum })
+ onBlue?.(minNum)
}
}
return (
@@ -99,7 +109,7 @@ export default ({ minNum = 0, maxNum = 10000, step = 1, digits = 0, defaultNum =
-
-
+
{unit}
onPlus()}>
@@ -107,4 +117,4 @@ export default ({ minNum = 0, maxNum = 10000, step = 1, digits = 0, defaultNum =
)
-}
+})
diff --git a/src/components/counter/index1.module.scss b/src/components/counter/index1.module.scss
deleted file mode 100644
index fe96cca..0000000
--- a/src/components/counter/index1.module.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-
-.main{
- display: flex;
- align-items: center;
- justify-content: space-between;
- width: 100%;
- .reduce, .plus{
- font-size: $font_size_big;
- color: $color_main;
- width: 46px;
- height: 46px;
- display: flex;
- align-items: center;
- justify-content:center;
- font-size: 50px;
- background-color: $color_main;
- color: #fff;
- border-radius: 8px;
- }
- .input{
- display: flex;
- align-items: flex-end;
- background-color: #fff;
- padding: 5px 10px;
- box-sizing: border-box;
- width: 106px;
- border-radius: 10px;
- }
- input{
- font-size: $font_size_medium;
- }
- .unit{
- font-size: $font_size_min;
- color: $color_font_two;
- }
-
-}
\ No newline at end of file
diff --git a/src/components/counter/index1.tsx b/src/components/counter/index1.tsx
deleted file mode 100644
index db6b362..0000000
--- a/src/components/counter/index1.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { Input, View } from '@tarojs/components'
-import { useEffect, useMemo, useRef, useState } from 'react'
-import Big from 'big.js'
-import styles from './index.module.scss'
-type params = {
- minNum?: number //最小值
- maxNum?: number //最大值
- step?: number //步长
- defaultNum?: number //默认值
- digits?: number //多少位小数
- onChange?: (val: number) => void
- onBlue?: (val: number) => void //失去焦点触发
- onClickBtn?: (val: number) => void
- unit?: string
-}
-export default ({ minNum = 0, maxNum = 100, step = 1, digits = 0, defaultNum = 0, onChange, onBlue, onClickBtn, unit = '' }: params) => {
- const [value, setValue] = useState({ count: defaultNum })
-
- const onPlus = () => {
- let { count } = value
- let num_res = Big(count).add(step).toNumber()
- num_res = num_res >= maxNum ? maxNum : num_res
- num_res = formatDigits(num_res)
- setValue({ ...value, count: num_res })
- onChange?.(parseFloat(num_res))
- onClickBtn?.(parseFloat(num_res))
- }
- const minus = () => {
- let { count } = value
- let num_res = Big(count).minus(step).toNumber()
- num_res = num_res < minNum ? 0 : num_res
- setValue({ ...value, count: num_res })
- onChange?.(parseFloat(num_res))
- onClickBtn?.(parseFloat(num_res))
- }
-
- //保留小数
- const formatDigits = (num) => {
- num = num + ''
- if (num.includes('.') && digits > 0) {
- console.log('num::', num.includes('.'))
- let res = num.split('.')
- let last_num = res[1].substr(0, digits)
- return res[0] + '.' + last_num
- }
- return parseFloat(num)
- }
-
- //检查数据
- const checkData = (val) => {
- let num = parseFloat(val)
- if (num > maxNum) return maxNum
- if (num < minNum) return minNum
- return val
- }
-
- const onInputEven = (e) => {
- let res = e.detail.value
- if (res === '') {
- setValue({ ...value, count: minNum })
- onChange?.(minNum)
- } else if (!isNaN(Number(res))) {
- let count = formatDigits(res)
- count = checkData(count)
- setValue({ ...value, count })
- onChange?.(parseFloat(count as string))
- } else {
- let num = parseFloat(res)
- if (!isNaN(num)) {
- let count = formatDigits(num)
- count = checkData(count)
- setValue({ ...value, count })
- onChange?.(count as number)
- } else {
- setValue({ ...value, count: defaultNum })
- onChange?.(defaultNum)
- }
- }
- }
-
- const onBluerEven = () => {
- let num = parseFloat(value.count)
- if (!isNaN(num)) {
- let count = formatDigits(num)
- count = checkData(count)
- setValue({ ...value, count })
- onBlue?.(count as number)
- } else {
- setValue({ ...value, count: defaultNum })
- onBlue?.(defaultNum)
- }
- }
- return (
-
- minus()}>
- -
-
-
-
- {unit}
-
- onPlus()}>
- +
-
-
- )
-}