🎈 perf(优化所有输入框):

src/components/search/index.tsx

@@ -1,83 +1,113 @@
-import { Input, View } from "@tarojs/components";
-import styles from "./index.module.scss"
-import CloseBtn from "@/components/closeBtn"
-import classnames from "classnames";
-import { debounce } from "@/common/util";
-import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { Input, View } from '@tarojs/components'
+import styles from './index.module.scss'
+import CloseBtn from '@/components/closeBtn'
+import classnames from 'classnames'
+import { debounce } from '@/common/util'
+import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react'
 
 type Params = {
-    clickOnSearch?: (val: string) => void
-    disabled?: false|true,
-    placeholder?: string,
-    changeOnSearch?:(any) => void,
-    showIcon?: false|true,
-    placeIcon?: 'out'|'inner',
-    style?: Object,
-    showBtn?: false|true,
-    btnStyle?: Object,
-    btnTitle?: string,
-    debounceTime?: number //防抖时间，不设默认为零
-    defaultValue?: string
+  clickOnSearch?: (val: string) => void
+  disabled?: false | true
+  placeholder?: string
+  changeOnSearch?: (any) => void
+  showIcon?: false | true
+  placeIcon?: 'out' | 'inner'
+  style?: Object
+  showBtn?: false | true
+  btnStyle?: Object
+  btnTitle?: string
+  debounceTime?: number //防抖时间，不设默认为零
+  defaultValue?: string
 }
 
-export default memo(forwardRef(({
-    clickOnSearch,  //点击筛选按钮触发
-    changeOnSearch, //输入文字触发
-    disabled = false, //是否禁用
-    placeholder = '输入搜索内容',
-    showIcon = true, //是否显示关闭图标
-    showBtn = false, //是否显示搜索按钮
-    btnStyle = {}, 
-    placeIcon = 'inner', //搜索图标位置：inner在里面，out在外面
-    btnTitle = '搜索', //搜索文字
-    debounceTime = 0, //防抖时间，不设默认为零
-    defaultValue = '' //默认值
-}:Params, ref) => {
-    const [inputCon , setInputCon] = useState('')
-    const debounceTimeRef = useRef(0)
-    useEffect(() => {
+export default memo(
+  forwardRef(
+    (
+      {
+        clickOnSearch, //点击筛选按钮触发
+        changeOnSearch, //输入文字触发
+        disabled = false, //是否禁用
+        placeholder = '输入搜索内容',
+        showIcon = true, //是否显示关闭图标
+        showBtn = false, //是否显示搜索按钮
+        btnStyle = {},
+        placeIcon = 'inner', //搜索图标位置：inner在里面，out在外面
+        btnTitle = '搜索', //搜索文字
+        debounceTime = 0, //防抖时间，不设默认为零
+        defaultValue = '', //默认值
+      }: Params,
+      ref,
+    ) => {
+      const [inputCon, setInputCon] = useState('')
+      const debounceTimeRef = useRef(0)
+      useEffect(() => {
         setInputCon(defaultValue)
-    }, [defaultValue])
+      }, [defaultValue])
 
-    useEffect(() => {
+      useEffect(() => {
         debounceTimeRef.current = debounceTime
-    }, [debounceTime])
+      }, [debounceTime])
 
-    const onInputEven = (e) => {
+      const onInputEven = (e) => {
         const value = e.detail.value
         changeData(value)
-    }
+      }
 
-    useImperativeHandle(ref, () => ({
-        clearInput
-    }))
+      useImperativeHandle(ref, () => ({
+        clearInput,
+      }))
 
-    const clearInput = () => {
+      const clearInput = () => {
         setInputCon('')
         changeOnSearch?.('')
-    }
+      }
 
-    const changeData = debounce((value) => {
+      const changeData = debounce((value) => {
         setInputCon(value)
         changeOnSearch?.(value)
-    }, debounceTimeRef.current)
+      }, debounceTimeRef.current)
 
-    const onSearch = () => {
+      const onSearch = () => {
         clickOnSearch?.(inputCon)
-    }
+      }
 
-    return (
+      return (
         <>
-            <View className={styles.search_main} >
-                <View className={styles.search_con}>
-                    {showIcon&&<View className={classnames('iconfont', 'icon-sousuo', styles.icon_a_sousuo1_self, placeIcon=='inner'?styles.icon_inner:styles.icon_out)}></View>}
-                    <Input placeholderStyle='color:#ABABAB; font-size:26rpx' onConfirm={onSearch} className={classnames(placeIcon=='out'&&styles.input_out)} disabled={disabled} value={inputCon} placeholder={placeholder} onInput={(e) => onInputEven(e)}></Input>
-                    {!!inputCon&&<View className={styles.search_closeBtn}>
-                        <CloseBtn onClose={() => clearInput()} styleObj={{width: '20rpx', height:'20rpx', backgroundColor:'#fff', border:'0'}}/>
-                    </View>}
+          <View className={styles.search_main}>
+            <View className={styles.search_con}>
+              {showIcon && (
+                <View
+                  className={classnames(
+                    'iconfont',
+                    'icon-sousuo',
+                    styles.icon_a_sousuo1_self,
+                    placeIcon == 'inner' ? styles.icon_inner : styles.icon_out,
+                  )}></View>
+              )}
+              <Input
+                alwaysEmbed={true}
+                cursorSpacing={150}
+                placeholderStyle='color:#ABABAB; font-size:26rpx'
+                onConfirm={onSearch}
+                className={classnames(placeIcon == 'out' && styles.input_out)}
+                disabled={disabled}
+                value={inputCon}
+                placeholder={placeholder}
+                onInput={(e) => onInputEven(e)}></Input>
+              {!!inputCon && (
+                <View className={styles.search_closeBtn}>
+                  <CloseBtn onClose={() => clearInput()} styleObj={{ width: '20rpx', height: '20rpx', backgroundColor: '#fff', border: '0' }} />
                 </View>
-                {showBtn&&<View style={btnStyle} className={styles.btn} onClick = {onSearch}>{btnTitle}</View>}
+              )}
             </View>
+            {showBtn && (
+              <View style={btnStyle} className={styles.btn} onClick={onSearch}>
+                {btnTitle}
+              </View>
+            )}
+          </View>
         </>
-    )
-}))
+      )
+    },
+  ),
+)