Merge pull request #2283 from didi/perf-rn-image

perf: mpx-image 优化无用的createElement调用

Author: hiyuki

packages/webpack-plugin/lib/runtime/components/react/mpx-image.tsx

@@ -464,44 +464,50 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
     }
   )
 
-  const SvgImage = createElement(
-    View,
-    innerProps,
-    createElement(SvgCssUri, {
-      uri: src,
-      onLayout: onSvgLoad,
-      onError: binderror && onSvgError,
-      style: extendObject(
-        { transformOrigin: 'left top' },
-        modeStyle
-      )
-    })
-  )
-
-  const BaseImage = renderImage(
-    extendObject(
-      {
-        source: { uri: src },
-        resizeMode: resizeMode,
-        onLoad: bindload && onImageLoad,
-        onError: binderror && onImageError,
+  function renderSvgImage () {
+    return createElement(
+      View,
+      innerProps,
+      createElement(SvgCssUri, {
+        uri: src,
+        onLayout: onSvgLoad,
+        onError: binderror && onSvgError,
         style: extendObject(
-          {
-            transformOrigin: 'left top',
-            width: isCropMode ? imageWidth : '100%',
-            height: isCropMode ? imageHeight : '100%'
-          },
-          isCropMode ? modeStyle : {}
+          { transformOrigin: 'left top' },
+          modeStyle
         )
-      },
-      isLayoutMode ? {} : innerProps
-    ),
-    enableFastImage
-  )
+      })
+    )
+  }
 
-  const LayoutImage = createElement(View, innerProps, loaded && BaseImage)
+  function renderBaseImage () {
+    return renderImage(
+      extendObject(
+        {
+          source: { uri: src },
+          resizeMode: resizeMode,
+          onLoad: bindload && onImageLoad,
+          onError: binderror && onImageError,
+          style: extendObject(
+            {
+              transformOrigin: 'left top',
+              width: isCropMode ? imageWidth : '100%',
+              height: isCropMode ? imageHeight : '100%'
+            },
+            isCropMode ? modeStyle : {}
+          )
+        },
+        isLayoutMode ? {} : innerProps
+      ),
+      enableFastImage
+    )
+  }
+
+  function renderLayoutImage () {
+    return createElement(View, innerProps, loaded && renderBaseImage())
+  }
 
-  const finalComponent = isSvg ? SvgImage : isLayoutMode ? LayoutImage : BaseImage
+  const finalComponent = isSvg ? renderSvgImage() : isLayoutMode ? renderLayoutImage() : renderBaseImage()
 
   if (hasPositionFixed) {
     return createElement(Portal, null, finalComponent)