Merge pull request #2253 from didi/perf-picker-view

perf: use `contentOffset` instead of `onContentSizeChange` in PikcerView

Author: hiyuki

packages/webpack-plugin/lib/runtime/components/react/mpx-picker-view-column/index.tsx

@@ -98,6 +98,11 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     return [{ paddingVertical: paddingHeight }]
   }, [paddingHeight])
 
+  const initialContentOffsetY = useMemo(
+    () => initialIndex * itemRawH,
+    [initialIndex, itemRawH]
+  )
+
   const getIndex = useCallback((y: number) => {
     const calc = Math.round(y / itemRawH)
     return Math.max(0, Math.min(calc, maxIndex))
@@ -155,17 +160,6 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     }, isIOS ? 0 : 200)
   }, [itemRawH, maxIndex, initialIndex])
 
-  const onContentSizeChange = useCallback((_w: number, h: number) => {
-    const y = initialIndex * itemRawH
-    if (y <= h) {
-      clearTimerScrollTo()
-      timerScrollTo.current = setTimeout(() => {
-        scrollViewRef.current?.scrollTo({ x: 0, y, animated: false })
-        activeIndex.current = initialIndex
-      }, 0)
-    }
-  }, [itemRawH, initialIndex])
-
   const onItemLayout = useCallback((e: LayoutChangeEvent) => {
     const { height: rawH } = e.nativeEvent.layout
     const roundedH = Math.round(rawH)
@@ -331,8 +325,8 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
       onScrollEndDrag,
       onMomentumScrollBegin,
       onMomentumScrollEnd,
-      onContentSizeChange,
-      contentContainerStyle
+      contentContainerStyle,
+      contentOffset: { x: 0, y: initialContentOffsetY }
     }) as React.ComponentProps<typeof Reanimated.ScrollView>
 
     return createElement(

packages/webpack-plugin/lib/runtime/components/react/mpx-picker-view/index.tsx

@@ -170,7 +170,7 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
         columnData,
         ref: cloneRef,
         columnIndex: index,
-        key: `pick-view-${index}`,
+        key: `pick-view-${index}-${columnData.length}`,
         wrapperStyle: {
           height: normalStyle?.height || DefaultPickerItemH,
           itemHeight: indicatorH || DefaultPickerItemH