Merge pull request #743 from thundersdata-frontend/refactor-rn

perf: 优化多个组件
thundersdata-frontend · Oct 12, 2023 · 0dda749 · 0dda749
2 parents 9d5f415 + da61237
commit 0dda749
Show file tree

Hide file tree

Showing 31 changed files with 566 additions and 767 deletions.
diff --git a/.changeset/rich-kings-vanish.md b/.changeset/rich-kings-vanish.md
@@ -0,0 +1,5 @@
+---
+'@td-design/react-native': patch
+---
+
+使用useSafeState代替useState
diff --git a/.changeset/smart-phones-stare.md b/.changeset/smart-phones-stare.md
@@ -0,0 +1,8 @@
+---
+'@td-design/react-native-skeleton': minor
+'@td-design/react-native-rating': minor
+'@td-design/react-native-tabs': minor
+'@td-design/svgicon-cli': minor
+---
+
+perf: 优化多个组件
diff --git a/packages/hooks/src/useGetState/index.ts b/packages/hooks/src/useGetState/index.ts
@@ -10,7 +10,7 @@ function useGetState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateActio
 function useGetState<S = undefined>(): [
   S | undefined,
   Dispatch<SetStateAction<S | undefined>>,
-  GetStateAction<S | undefined>
+  GetStateAction<S | undefined>,
 ];
 function useGetState<S>(initialState?: S) {
   const [state, setState] = useSafeState(initialState);

diff --git a/packages/lego/src/bar-line/index.tsx b/packages/lego/src/bar-line/index.tsx
@@ -199,16 +199,15 @@ function BarLine<TType extends Params['barType']>(
                       border-radius: 7px;
                     "></div>
                     ${params[0]?.seriesName}：${params[0]?.data?.value || params[0]?.data} ${
-                barUnit ?? params[0]?.data?.unit ?? ''
-              }
+                      barUnit ?? params[0]?.data?.unit ?? ''
+                    }
                   </div>
                   <div style="display: flex; align-items: center;">
                   <div style="
                     width: 7px;
                     height: 7px;
-                    background: linear-gradient(180deg, ${params?.[5]?.color?.colorStops?.[0]?.color} 0%, ${
-                params?.[5]?.color?.colorStops?.[1]?.color
-              } 100%);
+                    background: linear-gradient(180deg, ${params?.[5]?.color?.colorStops?.[0]?.color} 0%, ${params?.[5]
+                      ?.color?.colorStops?.[1]?.color} 100%);
                     margin-right: 4px;
                     border-radius: 7px;
                   "></div>
@@ -245,23 +244,21 @@ function BarLine<TType extends Params['barType']>(
                     <div style="
                       width: 7px;
                       height: 7px;
-                      background: linear-gradient(180deg, ${params[0]?.color?.colorStops?.[0]?.color} 0%, ${
-                params[0]?.color?.colorStops?.[1]?.color
-              } 100%);
+                      background: linear-gradient(180deg, ${params[0]?.color?.colorStops?.[0]?.color} 0%, ${params[0]
+                        ?.color?.colorStops?.[1]?.color} 100%);
                       margin-right: 4px;
                       border-radius: 7px;
                     "></div>
                     ${params[0]?.seriesName}：${params[0]?.data?.value || params[0]?.data} ${
-                barUnit ?? params[0]?.data?.unit ?? ''
-              }
+                      barUnit ?? params[0]?.data?.unit ?? ''
+                    }
                   </div>
                   <div style="display: flex; align-items: center;">
                   <div style="
                     width: 7px;
                     height: 7px;
-                    background: linear-gradient(180deg, ${params?.[2]?.color?.colorStops?.[0]?.color} 0%, ${
-                params?.[2]?.color?.colorStops?.[1]?.color
-              } 100%);
+                    background: linear-gradient(180deg, ${params?.[2]?.color?.colorStops?.[0]?.color} 0%, ${params?.[2]
+                      ?.color?.colorStops?.[1]?.color} 100%);
                     margin-right: 4px;
                     border-radius: 7px;
                   "></div>

diff --git a/packages/lego/src/cylinder-shadow-bar/index.tsx b/packages/lego/src/cylinder-shadow-bar/index.tsx
@@ -107,8 +107,8 @@ export default forwardRef<ReactEcharts, CylinderShadowBarProps>(
                 border-radius: 7px;
               "></div>
               ${params[0]?.seriesName}：${params[0]?.data?.value || params[0]?.data} ${
-              unit ?? params[0]?.data?.unit ?? ''
-            }
+                unit ?? params[0]?.data?.unit ?? ''
+              }
             </div>
           `;
 

diff --git a/packages/lego/src/hooks/useBaseChartConfig.ts b/packages/lego/src/hooks/useBaseChartConfig.ts
@@ -63,9 +63,8 @@ export default function useBaseChartConfig(inModal = false, unit?: string) {
                   <div style="
                     width: 7px;
                     height: 7px;
-                    background: linear-gradient(180deg, ${item?.color?.colorStops?.[0]?.color} 0%, ${
-                item?.color?.colorStops?.[1]?.color
-              } 100%);
+                    background: linear-gradient(180deg, ${item?.color?.colorStops?.[0]?.color} 0%, ${item?.color
+                      ?.colorStops?.[1]?.color} 100%);
                     margin-right: 4px;
                     border-radius: 7px;
                   "></div>

diff --git a/packages/lego/src/horizontal-bar/index.tsx b/packages/lego/src/horizontal-bar/index.tsx
@@ -83,15 +83,14 @@ export default forwardRef<ReactEcharts, HorizontalBarProps>(
               <div style="
                 width: 7px;
                 height: 7px;
-                background: linear-gradient(180deg, ${params[0]?.color?.colorStops?.[0]?.color} 0%, ${
-              params[0]?.color?.colorStops?.[1]?.color
-            } 100%);
+                background: linear-gradient(180deg, ${params[0]?.color?.colorStops?.[0]?.color} 0%, ${params[0]?.color
+                  ?.colorStops?.[1]?.color} 100%);
                 margin-right: 4px;
                 border-radius: 7px;
               "></div>
               ${params[0]?.seriesName}：${params[0]?.data?.value || params[0]?.data} ${
-              unit ?? params[0]?.data?.unit ?? ''
-            }
+                unit ?? params[0]?.data?.unit ?? ''
+              }
             </div>
           `;
 

diff --git a/packages/lego/src/multi-horizontal-bar/index.tsx b/packages/lego/src/multi-horizontal-bar/index.tsx
@@ -97,9 +97,8 @@ export default forwardRef<ReactEcharts, MultiHorizontalBarProps>(
               <div style="
                 width: 7px;
                 height: 7px;
-                background: linear-gradient(180deg, ${params[0]?.color?.colorStops?.[0]?.color} 0%, ${
-              params[0]?.color?.colorStops?.[1]?.color
-            } 100%);
+                background: linear-gradient(180deg, ${params[0]?.color?.colorStops?.[0]?.color} 0%, ${params[0]?.color
+                  ?.colorStops?.[1]?.color} 100%);
                 margin-right: 4px;
                 border-radius: 7px;
               "></div>

diff --git a/packages/lego/src/slice-bar/index.tsx b/packages/lego/src/slice-bar/index.tsx
@@ -96,15 +96,14 @@ export default forwardRef<ReactEcharts, SliceBarProps>(
               <div style="
                 width: 7px;
                 height: 7px;
-                background: linear-gradient(180deg, ${params[0]?.color?.colorStops?.[0]?.color} 0%, ${
-              params[0]?.color?.colorStops?.[1]?.color
-            } 100%);
+                background: linear-gradient(180deg, ${params[0]?.color?.colorStops?.[0]?.color} 0%, ${params[0]?.color
+                  ?.colorStops?.[1]?.color} 100%);
                 margin-right: 4px;
                 border-radius: 7px;
               "></div>
               ${params[0]?.seriesName}：${params[0]?.data?.value || params[0]?.data} ${
-              unit ?? params[0]?.data?.unit ?? ''
-            }
+                unit ?? params[0]?.data?.unit ?? ''
+              }
             </div>
           `;
 

diff --git a/packages/react-native-rating/src/SwipeRating.tsx b/packages/react-native-rating/src/SwipeRating.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import { PanGestureHandler } from 'react-native-gesture-handler';
 import Animated from 'react-native-reanimated';
@@ -37,13 +37,15 @@ const SwipeRating = forwardRef<unknown, SwipeRatingProps>(
       ratingFillColor,
     });
 
-    const renderRatings = () => {
-      return Array(count)
-        .fill('')
-        .map((_, index) => (
-          <SwipeStar key={index} width={size} height={size} bgColor={ratingBgColor} strokeColor={strokeColor} />
-        ));
-    };
+    const Ratings = useMemo(
+      () =>
+        Array(count)
+          .fill('')
+          .map((_, index) => (
+            <SwipeStar key={index} width={size} height={size} bgColor={ratingBgColor} strokeColor={strokeColor} />
+          )),
+      [count, ratingBgColor, size, strokeColor]
+    );
 
     const styles = StyleSheet.create({
       content: { flexDirection: 'row', alignItems: 'center', width: count * size },
@@ -56,7 +58,7 @@ const SwipeRating = forwardRef<unknown, SwipeRatingProps>(
             <Animated.View style={primaryViewStyle} />
           </Flex>
           <Flex justifyContent="center" alignItems="center">
-            {renderRatings()}
+            {Ratings}
           </Flex>
         </Animated.View>
       </PanGestureHandler>

diff --git a/packages/react-native-rating/src/TapRating.tsx b/packages/react-native-rating/src/TapRating.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 
 import { Flex, helpers, Text, Theme, useTheme } from '@td-design/react-native';
@@ -45,6 +45,22 @@ const TapRating = forwardRef<unknown, TapRatingProps>(
       },
     });
 
+    const Ratings = useMemo(
+      () =>
+        Array(count)
+          .fill('')
+          .map((_, index) => (
+            <Star
+              key={index}
+              position={index + 1}
+              fill={position >= index + 1}
+              onSelectStarInPosition={handleSelect}
+              {...{ size, disabled, starStyle, selectedColor, unselectedColor, outRangeScale, activeOpacity }}
+            />
+          )),
+      [count, disabled, outRangeScale, position, selectedColor, size, starStyle, unselectedColor, activeOpacity]
+    );
+
     return (
       <Flex flexDirection="column" alignItems="center" justifyContent="center" backgroundColor="transparent">
         {showReview && (
@@ -53,17 +69,7 @@ const TapRating = forwardRef<unknown, TapRatingProps>(
           </Text>
         )}
         <Flex justifyContent="center" alignItems="center">
-          {Array(count)
-            .fill('')
-            .map((_, index) => (
-              <Star
-                key={index}
-                position={index + 1}
-                fill={position >= index + 1}
-                onSelectStarInPosition={handleSelect}
-                {...{ size, disabled, starStyle, selectedColor, unselectedColor, outRangeScale, activeOpacity }}
-              />
-            ))}
+          {Ratings}
         </Flex>
       </Flex>
     );

diff --git a/packages/react-native-skeleton/src/StaticBone.tsx b/packages/react-native-skeleton/src/StaticBone.tsx
@@ -12,6 +12,8 @@ export const StaticBone: FC<StaticBoneProps> = ({ boneStyle, animationType, bone
       backgroundColor: interpolateColor(animation.value, [0, 1], [boneColor!, highlightColor!]),
     };
   });
+
   const styles = animationType === 'none' ? animatedStyle : [boneStyle, animatedStyle];
+
   return <Animated.View style={styles} />;
 };
diff --git a/packages/react-native-skeleton/src/index.md b/packages/react-native-skeleton/src/index.md
@@ -116,3 +116,31 @@ export type AnimationDirection =
   | undefined;
 
 ```
+
+_关于`styles`属性的说明：_
+
+- `styles`属性是一个数组，数组的每一项是一个`ViewStyle`对象，用于描述骨架屏的样式，数组的每一项对应骨架屏的一行，数组的长度决定了骨架屏的行数。
+- `styles`的样式最好跟里面元素的样式保持一致或者近似，否则会出现骨架效果跟实际效果不一致的情况。比如：
+
+```tsx
+<Skeleton styles={[styles.box1, styles.box2]}>
+  <View style={styles.box1}>
+    <Text>hello world</Text>
+  </View>
+  <View style={styles.box2}>
+    <Text>hello world</Text>
+  </View>
+</Skeleton>;
+
+const styles = StyleSheet.create({
+  box1: {
+    width: 200,
+    height: 50,
+  },
+  box2: {
+    width: 300,
+    height: 120,
+    marginTop: 20,
+  },
+});
+```