🎈 perf(升级react18):

2022-09-05 13:17:29 +08:00
parent 76dca1ef45
commit 25aff4f481
8 changed files with 14836 additions and 51571 deletions
@@ -1,49 +1,57 @@
-import { formatImgUrl } from "@/common/fotmat"
-import { Image, Swiper, SwiperItem, View } from "@tarojs/components"
-import { useMemo, useRef, useState } from "react"
+import { formatImgUrl } from '@/common/fotmat'
+import { Image, Swiper, SwiperItem, View } from '@tarojs/components'
+import { useMemo, useRef, useState } from 'react'
 import Taro from '@tarojs/taro'
-import styles  from './index.module.scss'
+import styles from './index.module.scss'

-type item = {title:string, img:string, url:string, id:number}
+type item = { title: string; img: string; url: string; id: number }
 type params = {
-    list?: item[]
+  list?: item[]
 }

-export default ({list = []}: params) => {
-    const [pageIndex, setPageIndex] = useState(1)
-    const pageRef = useRef<any>(null)
+export default ({ list = [] }: params) => {
+  const [pageIndex, setPageIndex] = useState(1)
+  const pageRef = useRef<any>(null)

-    const pageCount = useMemo(() => {
-        return list.length
-    },[list])
+  const pageCount = useMemo(() => {
+    return list.length
+  }, [list])

-    const formatImages = useMemo(() => {
-        return list?.map(item => formatImgUrl(item, '!w800'))
-    }, [list])
+  const formatImages = useMemo(() => {
+    return list?.map((item) => formatImgUrl(item, '!w800'))
+  }, [list])

-    const swiperChange = (e) => {
-        setPageIndex(e.detail.current + 1)
-    }
+  const swiperChange = (e) => {
+    setPageIndex(e.detail.current + 1)
+  }

-    const onShowImage = () => {
-        Taro.previewImage({
-            current: formatImages[0], 
-            urls: formatImages  
-        })
-    }
-    
-    return (
-        <View className={styles.swiper}>
-            {list.length > 0 && <Swiper className={styles.swiper_item} circular={true} onAnimationFinish={(e) => swiperChange(e)}>
-                {list?.map((item) => {
-                    return <SwiperItem >
-                        <View className={styles.image_item} onClick={onShowImage}>
-                            <Image mode="aspectFill" src={formatImgUrl(item, '!w400')}></Image>
-                        </View>
-                    </SwiperItem>
-                })}
-            </Swiper>}
-            {(list.length > 0)&&<View className={styles.page} ref={pageRef}>{pageIndex+'/'+pageCount}</View>}
+  const onShowImage = () => {
+    Taro.previewImage({
+      current: formatImages[0],
+      urls: formatImages,
+    })
+  }
+
+  return (
+    <View className={styles.swiper}>
+      {list.length > 0 && (
+        <Swiper className={styles.swiper_item} circular={true} onAnimationFinish={(e) => swiperChange(e)}>
+          {list?.map((item) => {
+            return (
+              <SwiperItem>
+                <View className={styles.image_item} onClick={onShowImage}>
+                  <Image mode='aspectFill' src={formatImgUrl(item, '!w400')}></Image>
+                </View>
+              </SwiperItem>
+            )
+          })}
+        </Swiper>
+      )}
+      {list.length > 0 && (
+        <View className={styles.page} ref={pageRef}>
+          {pageIndex + '/' + pageCount}
        </View>
-    )
-}
+      )}
+    </View>
+  )
+}