Rn optimize inner props

packages/webpack-plugin/lib/runtime/components/react/event.config.ts

@@ -1,28 +1,35 @@
-const eventConfigMap: { [key: string]: { bitFlag: string; events: string[] } } = {
-  bindtap: { bitFlag: '0', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd'] },
-  bindlongpress: { bitFlag: '1', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'] },
-  bindtouchstart: { bitFlag: '2', events: ['onTouchStart'] },
-  bindtouchmove: { bitFlag: '3', events: ['onTouchMove'] },
-  bindtouchend: { bitFlag: '4', events: ['onTouchEnd'] },
-  bindtouchcancel: { bitFlag: '5', events: ['onTouchCancel'] },
-  catchtap: { bitFlag: '6', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd'] },
-  catchlongpress: { bitFlag: '7', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'] },
-  catchtouchstart: { bitFlag: '8', events: ['onTouchStart'] },
-  catchtouchmove: { bitFlag: '9', events: ['onTouchMove'] },
-  catchtouchend: { bitFlag: 'a', events: ['onTouchEnd'] },
-  catchtouchcancel: { bitFlag: 'b', events: ['onTouchCancel'] },
-  'capture-bindtap': { bitFlag: 'c', events: ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture'] },
-  'capture-bindlongpress': { bitFlag: 'd', events: ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture', 'onTouchCancelCapture'] },
-  'capture-bindtouchstart': { bitFlag: 'e', events: ['onTouchStartCapture'] },
-  'capture-bindtouchmove': { bitFlag: 'f', events: ['onTouchMoveCapture'] },
-  'capture-bindtouchend': { bitFlag: 'g', events: ['onTouchEndCapture'] },
-  'capture-bindtouchcancel': { bitFlag: 'h', events: ['onTouchCancelCapture'] },
-  'capture-catchtap': { bitFlag: 'i', events: ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture'] },
-  'capture-catchlongpress': { bitFlag: 'j', events: ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture', 'onTouchCancelCapture'] },
-  'capture-catchtouchstart': { bitFlag: 'k', events: ['onTouchStartCapture'] },
-  'capture-catchtouchmove': { bitFlag: 'l', events: ['onTouchMoveCapture'] },
-  'capture-catchtouchend': { bitFlag: 'm', events: ['onTouchEndCapture'] },
-  'capture-catchtouchcancel': { bitFlag: 'n', events: ['onTouchCancelCapture'] }
+import type { EventMeta } from './types/getInnerListeners'
+
+const tapEvents = ['onTouchStart', 'onTouchMove', 'onTouchEnd']
+const longpressEvents = ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel']
+const tapCaptureEvents = ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture']
+const longpressCaptureEvents = ['onTouchStartCapture', 'onTouchMoveCapture', 'onTouchEndCapture', 'onTouchCancelCapture']
+
+const eventConfigMap: Record<string, EventMeta> = {
+  bindtap: { bitFlag: '0', events: tapEvents, eventName: 'tap', eventType: 'bubble', hasCatch: false },
+  bindlongpress: { bitFlag: '1', events: longpressEvents, eventName: 'longpress', eventType: 'bubble', hasCatch: false },
+  bindtouchstart: { bitFlag: '2', events: ['onTouchStart'], eventName: 'touchstart', eventType: 'bubble', hasCatch: false },
+  bindtouchmove: { bitFlag: '3', events: ['onTouchMove'], eventName: 'touchmove', eventType: 'bubble', hasCatch: false },
+  bindtouchend: { bitFlag: '4', events: ['onTouchEnd'], eventName: 'touchend', eventType: 'bubble', hasCatch: false },
+  bindtouchcancel: { bitFlag: '5', events: ['onTouchCancel'], eventName: 'touchcancel', eventType: 'bubble', hasCatch: false },
+  catchtap: { bitFlag: '6', events: tapEvents, eventName: 'tap', eventType: 'bubble', hasCatch: true },
+  catchlongpress: { bitFlag: '7', events: longpressEvents, eventName: 'longpress', eventType: 'bubble', hasCatch: true },
+  catchtouchstart: { bitFlag: '8', events: ['onTouchStart'], eventName: 'touchstart', eventType: 'bubble', hasCatch: true },
+  catchtouchmove: { bitFlag: '9', events: ['onTouchMove'], eventName: 'touchmove', eventType: 'bubble', hasCatch: true },
+  catchtouchend: { bitFlag: 'a', events: ['onTouchEnd'], eventName: 'touchend', eventType: 'bubble', hasCatch: true },
+  catchtouchcancel: { bitFlag: 'b', events: ['onTouchCancel'], eventName: 'touchcancel', eventType: 'bubble', hasCatch: true },
+  'capture-bindtap': { bitFlag: 'c', events: tapCaptureEvents, eventName: 'tap', eventType: 'capture', hasCatch: false },
+  'capture-bindlongpress': { bitFlag: 'd', events: longpressCaptureEvents, eventName: 'longpress', eventType: 'capture', hasCatch: false },
+  'capture-bindtouchstart': { bitFlag: 'e', events: ['onTouchStartCapture'], eventName: 'touchstart', eventType: 'capture', hasCatch: false },
+  'capture-bindtouchmove': { bitFlag: 'f', events: ['onTouchMoveCapture'], eventName: 'touchmove', eventType: 'capture', hasCatch: false },
+  'capture-bindtouchend': { bitFlag: 'g', events: ['onTouchEndCapture'], eventName: 'touchend', eventType: 'capture', hasCatch: false },
+  'capture-bindtouchcancel': { bitFlag: 'h', events: ['onTouchCancelCapture'], eventName: 'touchcancel', eventType: 'capture', hasCatch: false },
+  'capture-catchtap': { bitFlag: 'i', events: tapCaptureEvents, eventName: 'tap', eventType: 'capture', hasCatch: true },
+  'capture-catchlongpress': { bitFlag: 'j', events: longpressCaptureEvents, eventName: 'longpress', eventType: 'capture', hasCatch: true },
+  'capture-catchtouchstart': { bitFlag: 'k', events: ['onTouchStartCapture'], eventName: 'touchstart', eventType: 'capture', hasCatch: true },
+  'capture-catchtouchmove': { bitFlag: 'l', events: ['onTouchMoveCapture'], eventName: 'touchmove', eventType: 'capture', hasCatch: true },
+  'capture-catchtouchend': { bitFlag: 'm', events: ['onTouchEndCapture'], eventName: 'touchend', eventType: 'capture', hasCatch: true },
+  'capture-catchtouchcancel': { bitFlag: 'n', events: ['onTouchCancelCapture'], eventName: 'touchcancel', eventType: 'capture', hasCatch: true }
 }
 
 export default eventConfigMap

packages/webpack-plugin/lib/runtime/components/react/getInnerListeners.ts

@@ -1,24 +1,38 @@
 import { useRef, useMemo } from 'react'
 import { collectDataset } from '@mpxjs/utils'
-import { omit, extendObject, useNavigation } from './utils'
+import { extendObject, useNavigation } from './utils'
 import eventConfigMap from './event.config'
 import {
   Props,
   EventConfig,
+  EventConfigRef,
   RawConfig,
   EventType,
   RemoveProps,
   InnerRef,
   LayoutRef,
   ExtendedNativeTouchEvent,
-  GlobalEventState
+  GlobalEventState,
+  TouchHandlerConfig
 } from './types/getInnerListeners'
 
 const globalEventState: GlobalEventState = {
   needPress: true,
   identifier: null
 }
 
+const baseRemovePropsMap: Record<string, boolean> = {
+  children: true,
+  'enable-background': true,
+  'enable-offset': true,
+  'enable-var': true,
+  'external-var-context': true,
+  'parent-font-size': true,
+  'parent-width': true,
+  'parent-height': true,
+  'enable-text-pass-through': true
+}
+
 const getTouchEvent = (
   type: string,
   event: ExtendedNativeTouchEvent,
@@ -216,29 +230,45 @@ function handleTouchcancel (e: ExtendedNativeTouchEvent, type: EventType, eventC
   innerRef.current.startTimer[type] && clearTimeout(innerRef.current.startTimer[type] as unknown as number)
 }
 
-function createTouchEventHandler (eventName: string, eventConfig: EventConfig) {
-  return (e: ExtendedNativeTouchEvent) => {
-    const bubbleHandlerMap: Record<string, any> = {
-      onTouchStart: handleTouchstart,
-      onTouchMove: handleTouchmove,
-      onTouchEnd: handleTouchend,
-      onTouchCancel: handleTouchcancel
-    }
-
-    const captureHandlerMap: Record<string, any> = {
-      onTouchStartCapture: handleTouchstart,
-      onTouchMoveCapture: handleTouchmove,
-      onTouchEndCapture: handleTouchend,
-      onTouchCancelCapture: handleTouchcancel
-    }
-
-    if (bubbleHandlerMap[eventName]) {
-      bubbleHandlerMap[eventName](e, 'bubble', eventConfig)
-    }
+const touchHandlerMap: Record<string, TouchHandlerConfig> = {
+  onTouchStart: {
+    type: 'bubble',
+    handler: handleTouchstart
+  },
+  onTouchMove: {
+    type: 'bubble',
+    handler: handleTouchmove
+  },
+  onTouchEnd: {
+    type: 'bubble',
+    handler: handleTouchend
+  },
+  onTouchCancel: {
+    type: 'bubble',
+    handler: handleTouchcancel
+  },
+  onTouchStartCapture: {
+    type: 'capture',
+    handler: handleTouchstart
+  },
+  onTouchMoveCapture: {
+    type: 'capture',
+    handler: handleTouchmove
+  },
+  onTouchEndCapture: {
+    type: 'capture',
+    handler: handleTouchend
+  },
+  onTouchCancelCapture: {
+    type: 'capture',
+    handler: handleTouchcancel
+  }
+}
 
-    if (captureHandlerMap[eventName]) {
-      captureHandlerMap[eventName](e, 'capture', eventConfig)
-    }
+function createTouchEventHandler (eventName: string, eventConfigRef: EventConfigRef) {
+  const eventHandler = touchHandlerMap[eventName]
+  return (e: ExtendedNativeTouchEvent) => {
+    eventHandler.handler(e, eventHandler.type, eventConfigRef.current)
   }
 }
 
@@ -271,69 +301,63 @@ const useInnerProps = (
     disableTap: false,
     navigation
   }, rawConfig)
+  const eventConfigRef = useRef<EventConfig>(eventConfig)
 
+  const restProps: Props = {}
+  const eventNameMap: Record<string, boolean> = {}
+  const userRemovePropsMap: Record<string, boolean> = {}
   let hashEventKey = ''
-  const rawEventKeys: Array<string> = []
-  const transformedEventSet = new Set<string>()
+
+  userRemoveProps.forEach((key) => {
+    userRemovePropsMap[key] = true
+  })
+
   Object.keys(props).forEach((key) => {
-    if (eventConfigMap[key]) {
-      hashEventKey += eventConfigMap[key].bitFlag
-      rawEventKeys.push(key)
-      eventConfigMap[key].events.forEach((event) => {
-        transformedEventSet.add(event)
+    const eventMeta = eventConfigMap[key]
+
+    if (eventMeta) {
+      hashEventKey += eventMeta.bitFlag
+      eventMeta.events.forEach((event) => {
+        eventNameMap[event] = true
       })
-      const match = /^(bind|catch|capture-bind|capture-catch)(.*)$/.exec(key)!
-      const prefix = match[1]
-      const eventName = match[2]
-      eventConfig[eventName] = eventConfig[eventName] || {
+      eventConfig[eventMeta.eventName] = eventConfig[eventMeta.eventName] || {
         bubble: [],
         capture: [],
         hasCatch: false
       }
-      if (prefix === 'bind' || prefix === 'catch') {
-        eventConfig[eventName].bubble.push(key)
-      } else {
-        eventConfig[eventName].capture.push(key)
-      }
+      eventConfig[eventMeta.eventName][eventMeta.eventType].push(key)
 
-      if (prefix === 'catch' || prefix === 'capture-catch') {
-        eventConfig[eventName].hasCatch = true
+      if (eventMeta.hasCatch) {
+        eventConfig[eventMeta.eventName].hasCatch = true
       }
+      return
+    }
+
+    if (!baseRemovePropsMap[key] && !userRemovePropsMap[key]) {
+      restProps[key] = props[key]
     }
   })
 
+  eventConfigRef.current = eventConfig
+
   const events = useMemo(() => {
     if (!hashEventKey) {
       return {}
     }
 
     const events: Record<string, (e: ExtendedNativeTouchEvent) => void> = {}
 
-    for (const eventName of transformedEventSet) {
-      events[eventName] = createTouchEventHandler(eventName, eventConfig)
-    }
+    Object.keys(eventNameMap).forEach((eventName) => {
+      events[eventName] = createTouchEventHandler(eventName, eventConfigRef)
+    })
 
     return events
   }, [hashEventKey])
 
-  const removeProps = [
-    'children',
-    'enable-background',
-    'enable-offset',
-    'enable-var',
-    'external-var-context',
-    'parent-font-size',
-    'parent-width',
-    'parent-height',
-    'enable-text-pass-through',
-    ...userRemoveProps,
-    ...rawEventKeys
-  ]
-
   return extendObject(
     {},
     events,
-    omit(props, removeProps)
+    restProps
   )
 }
 export default useInnerProps

packages/webpack-plugin/lib/runtime/components/react/types/getInnerListeners.d.ts

@@ -43,6 +43,14 @@ interface EventConfigDetail {
   hasCatch: boolean
 }
 
+interface EventMeta {
+  bitFlag: string
+  events: string[]
+  eventName: string
+  eventType: EventType
+  hasCatch: boolean
+}
+
 type EventConfig = {
   innerRef: InnerRef
   propsRef: PropsRef
@@ -52,6 +60,15 @@ type EventConfig = {
   [index: string]: EventConfigDetail
 }
 
+type EventConfigRef = MutableRefObject<EventConfig>
+
+type TouchHandler = (e: ExtendedNativeTouchEvent, type: EventType, eventConfig: EventConfig) => void
+
+interface TouchHandlerConfig {
+  type: EventType
+  handler: TouchHandler
+}
+
 interface RawConfig {
   layoutRef?: LayoutRef
   disableTap?: boolean
@@ -101,7 +118,10 @@ export {
   Navigation,
   ExtendedNativeTouchEvent,
   EventConfig,
+  EventConfigRef,
+  EventMeta,
   RawConfig,
   EventType,
-  GlobalEventState
+  GlobalEventState,
+  TouchHandlerConfig
 }