@mpxjs/webpack-plugin 2.10.16-beta.6 → 2.10.16-perf.1

package/lib/react/processJSON.js

@@ -12,8 +12,11 @@ const { transSubpackage } = require('../utils/trans-async-sub-rules')
 const createJSONHelper = require('../json-compiler/helper')
 const getRulesRunner = require('../platform/index')
 const { RESOLVE_IGNORED_ERR } = require('../utils/const')
+const normalize = require('../utils/normalize')
 const RecordResourceMapDependency = require('../dependencies/RecordResourceMapDependency')
 const RecordPageConfigsMapDependency = require('../dependencies/RecordPageConfigsMapDependency')
+const mpxViewPath = normalize.lib('runtime/components/react/dist/mpx-view.jsx')
+const mpxTextPath = normalize.lib('runtime/components/react/dist/mpx-text.jsx')
 
 module.exports = function (jsonContent, {
   loaderContext,
@@ -39,38 +42,23 @@ module.exports = function (jsonContent, {
 
   const emitWarning = (msg) => {
     loaderContext.emitWarning(
-      new Error('[Mpx json warning][' + loaderContext.resource + ']: ' + msg)
+      new Error('[json processor][' + loaderContext.resource + ']: ' + msg)
     )
   }
 
   const emitError = (msg) => {
     loaderContext.emitError(
-      new Error('[Mpx json error][' + loaderContext.resource + ']: ' + msg)
+      new Error('[json compiler][' + loaderContext.resource + ']: ' + msg)
     )
   }
 
   const stringifyRequest = r => loaderUtils.stringifyRequest(loaderContext, r)
 
-  function fillInComponentsMap (name, entry, tarRoot) {
-    const { resource, outputPath } = entry
-    const { resourcePath } = parseRequest(resource)
-    componentsMap[resourcePath] = outputPath
-    loaderContext._module && loaderContext._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, 'component', outputPath))
-    localComponentsMap[name] = {
-      resource: addQuery(resource, {
-        isComponent: true,
-        outputPath
-      }),
-      async: tarRoot
-    }
-  }
-
   const {
     isUrlRequest,
     urlToRequest,
     processPage,
-    processComponent,
-    processPlaceholder
+    processComponent
   } = createJSONHelper({
     loaderContext,
     emitWarning,
@@ -149,6 +137,45 @@ module.exports = function (jsonContent, {
     isShow: true
   }
 
+  const fillInComponentPlaceholder = (name, placeholder, placeholderEntry) => {
+    const componentPlaceholder = jsonObj.componentPlaceholder || {}
+    if (componentPlaceholder[name]) return
+    componentPlaceholder[name] = placeholder
+    jsonObj.componentPlaceholder = componentPlaceholder
+    if (placeholderEntry && !jsonObj.usingComponents[placeholder]) jsonObj.usingComponents[placeholder] = placeholderEntry
+  }
+
+  const fillInComponentsMap = (name, entry, tarRoot) => {
+    const { resource, outputPath } = entry
+    const { resourcePath } = parseRequest(resource)
+    tarRoot = transSubpackage(mpx.transSubpackageRules, tarRoot)
+    componentsMap[resourcePath] = outputPath
+    loaderContext._module && loaderContext._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, 'component', outputPath))
+    localComponentsMap[name] = {
+      resource: addQuery(resource, {
+        isComponent: true,
+        outputPath
+      }),
+      async: tarRoot
+    }
+  }
+
+  const normalizePlaceholder = (placeholder) => {
+    if (typeof placeholder === 'string') {
+      const placeholderMap = mode === 'ali'
+        ? {
+          view: { name: 'mpx-view', resource: mpxViewPath },
+          text: { name: 'mpx-text', resource: mpxTextPath }
+        }
+        : {}
+      placeholder = placeholderMap[placeholder] || { name: placeholder }
+    }
+    if (!placeholder.name) {
+      emitError('The asyncSubpackageRules configuration format of @mpxjs/webpack-plugin a is incorrect')
+    }
+    return placeholder
+  }
+
   const processTabBar = (tabBar, callback) => {
     if (tabBar) {
       tabBar = Object.assign({}, defaultTabbar, tabBar)
@@ -318,34 +345,38 @@ module.exports = function (jsonContent, {
 
   const processComponents = (components, context, callback) => {
     if (components) {
-      const asyncComponents = []
-      const resolveResourcePathMap = new Map()
       async.eachOf(components, (component, name, callback) => {
-        processComponent(component, context, {}, (err, entry = {}, { tarRoot, placeholder, resourcePath } = {}) => {
+        processComponent(component, context, {}, (err, entry = {}, { tarRoot, placeholder } = {}) => {
           if (err) return callback(err === RESOLVE_IGNORED_ERR ? null : err)
+          fillInComponentsMap(name, entry, tarRoot)
           const { relativePath } = entry
 
-          tarRoot = transSubpackage(mpx.transSubpackageRules, tarRoot)
-
-          resolveResourcePathMap.set(name, resourcePath)
-          if (tarRoot) asyncComponents.push({ name, tarRoot, placeholder, relativePath })
-
-          fillInComponentsMap(name, entry, tarRoot)
-          callback()
-        })
-      }, (err) => {
-        if (err) return callback(err)
-        async.each(asyncComponents, ({ name, tarRoot, placeholder, relativePath }, callback) => {
-          processPlaceholder({ jsonObj, context, name, tarRoot, placeholder, relativePath, resolveResourcePathMap }, (err, placeholder) => {
-            if (err) return callback(err)
+          if (tarRoot) {
             if (placeholder) {
-              const { name, entry } = placeholder
-              fillInComponentsMap(name, entry, '')
+              placeholder = normalizePlaceholder(placeholder)
+              if (placeholder.resource) {
+                processComponent(placeholder.resource, projectRoot, { relativePath }, (err, entry) => {
+                  if (err) return callback(err)
+                  fillInComponentPlaceholder(name, placeholder.name, entry)
+                  fillInComponentsMap(placeholder.name, entry, '')
+                  callback()
+                })
+              } else {
+                fillInComponentPlaceholder(name, placeholder.name)
+                callback()
+              }
+            } else {
+              if (!jsonObj.componentPlaceholder || !jsonObj.componentPlaceholder[name]) {
+                const errMsg = `componentPlaceholder of "${name}" doesn't exist! \n\r`
+                emitError(errMsg)
+              }
+              callback()
             }
+          } else {
             callback()
-          })
-        }, callback)
-      })
+          }
+        })
+      }, callback)
     } else {
       callback()
     }
@@ -363,6 +394,7 @@ module.exports = function (jsonContent, {
       callback()
     }
   }
+
   async.parallel([
     (callback) => {
       // 添加首页标识

package/lib/react/processStyles.js

@@ -15,12 +15,12 @@ module.exports = function (styles, {
   if (styles.length) {
     const warn = (msg) => {
       loaderContext.emitWarning(
-        new Error('[Mpx style warning][' + loaderContext.resource + ']: ' + msg)
+        new Error('[style compiler][' + loaderContext.resource + ']: ' + msg)
       )
     }
     const error = (msg) => {
       loaderContext.emitError(
-        new Error('[Mpx style error][' + loaderContext.resource + ']: ' + msg)
+        new Error('[style compiler][' + loaderContext.resource + ']: ' + msg)
       )
     }
     const { mode, srcMode } = loaderContext.getMpx()
@@ -52,7 +52,6 @@ module.exports = function (styles, {
           filename: loaderContext.resourcePath,
           mode,
           srcMode,
-          ctorType,
           warn,
           error
         })

package/lib/react/processTemplate.js

@@ -17,7 +17,6 @@ module.exports = function (template, {
   moduleId,
   ctorType,
   usingComponentsInfo,
-  originalUsingComponents,
   componentGenerics
 }, callback) {
   const mpx = loaderContext.getMpx()
@@ -47,29 +46,28 @@ module.exports = function (template, {
   if (template) {
     // 由于远端src template资源引用的相对路径可能发生变化，暂时不支持。
     if (template.src) {
-      return callback(new Error('[Mpx template error][' + loaderContext.resource + ']: ' + 'template content must be inline in .mpx files!'))
+      return callback(new Error('[mpx loader][' + loaderContext.resource + ']: ' + 'template content must be inline in .mpx files!'))
     }
     if (template.lang) {
-      return callback(new Error('[Mpx template error][' + loaderContext.resource + ']: ' + 'template lang is not supported in trans react native mode temporarily, we will support it in the future!'))
+      return callback(new Error('[mpx loader][' + loaderContext.resource + ']: ' + 'template lang is not supported in trans react native mode temporarily, we will support it in the future!'))
     }
 
     if (template.content) {
       const templateSrcMode = template.mode || srcMode
       const warn = (msg) => {
         loaderContext.emitWarning(
-          new Error('[Mpx template warning][' + loaderContext.resource + ']: ' + msg)
+          new Error('[template compiler][' + loaderContext.resource + ']: ' + msg)
         )
       }
       const error = (msg) => {
         loaderContext.emitError(
-          new Error('[mpx template error][' + loaderContext.resource + ']: ' + msg)
+          new Error('[template compiler][' + loaderContext.resource + ']: ' + msg)
         )
       }
       const { root, meta } = templateCompiler.parse(template.content, {
         warn,
         error,
         usingComponentsInfo, // processTemplate中无其他地方使用，直接透传 string 类型
-        originalUsingComponents,
         hasComment,
         isNative,
         ctorType,
@@ -115,7 +113,7 @@ module.exports = function (template, {
         output += `var ${module} = require(${loaderUtils.stringifyRequest(this, src)});\n`
       }
 
-      const rawCode = genNode(root, true)
+      const rawCode = genNode(root)
       if (rawCode) {
         try {
           const ignoreMap = Object.assign({
@@ -132,7 +130,7 @@ module.exports = function (template, {
   return ${bindResult.code}
 };\n`
         } catch (e) {
-          error(`[Mpx template error]: Invalid render function generated by the template, please check!
+          error(`Invalid render function generated by the template, please check!
 Error code:
 ${rawCode}
 Error Detail:

package/lib/react/script-helper.js

@@ -4,11 +4,16 @@ const parseRequest = require('../utils/parse-request')
 const shallowStringify = require('../utils/shallow-stringify')
 const normalize = require('../utils/normalize')
 const addQuery = require('../utils/add-query')
+const { isBuildInReactTag } = require('../utils/dom-tag-config')
 
 function stringifyRequest (loaderContext, request) {
   return loaderUtils.stringifyRequest(loaderContext, request)
 }
 
+function getBuiltInComponentRequest (component) {
+  return JSON.stringify(addQuery(`@mpxjs/webpack-plugin/lib/runtime/components/react/dist/${component}`, { isComponent: true }))
+}
+
 function getAsyncChunkName (chunkName) {
   if (chunkName && typeof chunkName !== 'boolean') {
     return `/* webpackChunkName: "${chunkName}/index" */`
@@ -21,8 +26,8 @@ function getAsyncSuspense (type, moduleId, componentRequest, componentName, chun
   type: ${JSON.stringify(type)},
   moduleId: ${JSON.stringify(moduleId)},
   chunkName: ${JSON.stringify(chunkName)},
-  ${getFallback ? `getFallback: ${getFallback},` : ''}
-  ${getLoading ? `getLoading: ${getLoading},` : ''}
+  getFallback: ${getFallback},
+  getLoading: ${getLoading},
   getChildren () {
     return import(${getAsyncChunkName(chunkName)}${componentRequest}).then(function (res) {
       return getComponent(res, {displayName: ${JSON.stringify(componentName)}})
@@ -90,17 +95,22 @@ function buildComponentsMap ({ localComponentsMap, builtInComponentsMap, loaderC
         if (placeholder) {
           if (localComponentsMap[placeholder]) {
             const placeholderCfg = localComponentsMap[placeholder]
+            const placeholderRequest = stringifyRequest(loaderContext, placeholderCfg.resource)
             if (placeholderCfg.async) {
               loaderContext.emitWarning(
                 new Error(`[json processor][${loaderContext.resource}]: componentPlaceholder ${placeholder} should not be a async component, please check!`)
               )
             }
-            const placeholderRequest = stringifyRequest(loaderContext, placeholderCfg.resource)
             getFallback = getComponentGetter(getComponent(placeholderRequest, placeholder))
           } else {
-            loaderContext.emitError(
-              new Error(`[json processor][${loaderContext.resource}]: componentPlaceholder ${placeholder} is not built-in component or custom component, please check!`)
-            )
+            const tag = `mpx-${placeholder}`
+            if (isBuildInReactTag(tag)) {
+              getFallback = getComponentGetter(getBuiltInComponent(getBuiltInComponentRequest(tag)))
+            } else {
+              loaderContext.emitError(
+                new Error(`[json processor][${loaderContext.resource}]: componentPlaceholder ${placeholder} is not built-in component, please check!`)
+              )
+            }
           }
         } else {
           loaderContext.emitError(

package/lib/react/style-helper.js

@@ -1,6 +1,5 @@
 const postcss = require('postcss')
 const selectorParser = require('postcss-selector-parser')
-const { MPX_TAG_PAGE_SELECTOR } = require('../utils/const')
 const getRulesRunner = require('../platform/index')
 const dash2hump = require('../utils/hump-dash').dash2hump
 const unitRegExp = /^\s*(-?\d+(?:\.\d+)?)(rpx|vw|vh)\s*$/
@@ -8,8 +7,8 @@ const numberRegExp = /^\s*(-?\d+(\.\d+)?)(px)?\s*$/
 const hairlineRegExp = /^\s*hairlineWidth\s*$/
 const varRegExp = /^--/
 const cssPrefixExp = /^-(webkit|moz|ms|o)-/
-function getClassMap ({ content, filename, mode, srcMode, ctorType, warn, error }) {
-  const classMap = ctorType === 'page' ? { [MPX_TAG_PAGE_SELECTOR]: { flex: 1 } } : {}
+function getClassMap ({ content, filename, mode, srcMode, warn, error }) {
+  const classMap = {}
 
   const root = postcss.parse(content, {
     from: filename
@@ -37,13 +36,6 @@ function getClassMap ({ content, filename, mode, srcMode, ctorType, warn, error
     error
   })
 
-  // 目前所有 AtRule 只支持 @media，其他全部给出错误提示
-  root.walkAtRules(rule => {
-    if (rule.name !== 'media') {
-      warn(`Only @media rule is supported in react native mode temporarily, but got @${rule.name}`)
-    }
-  })
-
   root.walkRules(rule => {
     const classMapValue = {}
     rule.walkDecls(({ prop, value }) => {

package/lib/runtime/components/react/context.ts

@@ -6,13 +6,9 @@ export type LabelContextValue = MutableRefObject<{
   triggerChange: (evt: NativeSyntheticEvent<TouchEvent>) => void
 }>
 
-export type KeyboardAvoidContextValue = MutableRefObject<{
-  cursorSpacing: number
-  ref: MutableRefObject<any>
-  adjustPosition: boolean
-  keyboardHeight?: number
-  onKeyboardShow?: () => void
-} | null>
+export type KeyboardAvoidContextValue = MutableRefObject<
+  { cursorSpacing: number, ref: MutableRefObject<any> } | null
+>
 
 export interface GroupValue {
   [key: string]: { checked: boolean; setValue: Dispatch<SetStateAction<boolean>> }
@@ -41,13 +37,13 @@ export interface IntersectionObserver {
 }
 
 export interface PortalContextValue {
-  mount: (children: React.ReactNode, key?: number | null, id?: number | null) => number | undefined
+  mount: (children: React.ReactNode, key?: number | null, id?: number| null) => number| undefined
   update: (key: number, children: React.ReactNode) => void
   unmount: (key: number) => void
 }
 
 export interface ScrollViewContextValue {
-  gestureRef: React.RefObject<any> | null
+  gestureRef: React.RefObject<any> | null,
   scrollOffset: Animated.Value
 }
 
@@ -57,7 +53,7 @@ export interface RouteContextValue {
 }
 
 export interface StickyContextValue {
-  registerStickyHeader: Function
+  registerStickyHeader: Function,
   unregisterStickyHeader: Function
 }
 
@@ -88,5 +84,3 @@ export const ScrollViewContext = createContext<ScrollViewContextValue>({ gesture
 export const PortalContext = createContext<PortalContextValue>(null as any)
 
 export const StickyContext = createContext<StickyContextValue>({ registerStickyHeader: noop, unregisterStickyHeader: noop })
-
-export const ProviderContext = createContext(null)

package/lib/runtime/components/react/dist/context.js

@@ -15,4 +15,3 @@ export const KeyboardAvoidContext = createContext(null);
 export const ScrollViewContext = createContext({ gestureRef: null, scrollOffset: new Animated.Value(0) });
 export const PortalContext = createContext(null);
 export const StickyContext = createContext({ registerStickyHeader: noop, unregisterStickyHeader: noop });
-export const ProviderContext = createContext(null);

package/lib/runtime/components/react/dist/mpx-image.jsx

@@ -40,16 +40,7 @@ const ModeMap = new Map([
     ...cropMode.map(mode => [mode, 'stretch'])
 ]);
 const isNumber = (value) => typeof value === 'number';
-const relativeCenteredSize = (viewSize, imageSize) => {
-    return (viewSize - imageSize) / 2;
-};
-// 获取能完全显示图片的缩放比例：长宽方向的缩放比例最小值即为能完全展示的比例
-function getFitScale(width1, height1, width2, height2) {
-    return Math.min(width2 / width1, height2 / height1);
-}
-function getFillScale(width1, height1, width2, height2) {
-    return Math.max(width2 / width1, height2 / height1);
-}
+const relativeCenteredSize = (viewSize, imageSize) => (viewSize - imageSize) / 2;
 function noMeetCalcRule(isSvg, mode, viewWidth, viewHeight, ratio) {
     const isMeetSize = viewWidth && viewHeight && ratio;
     if (isSvg && !isMeetSize)
@@ -58,16 +49,6 @@ function noMeetCalcRule(isSvg, mode, viewWidth, viewHeight, ratio) {
         return true;
     return false;
 }
-const getFixedWidth = (viewWidth, viewHeight, ratio) => {
-    if (!ratio)
-        return viewWidth;
-    const fixed = viewHeight / ratio;
-    return !fixed ? viewWidth : fixed;
-};
-const getFixedHeight = (viewWidth, viewHeight, ratio) => {
-    const fixed = viewWidth * ratio;
-    return !fixed ? viewHeight : fixed;
-};
 const Image = forwardRef((props, ref) => {
     const { src = '', mode = 'scaleToFill', style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'enable-fast-image': enableFastImage, 'parent-width': parentWidth, 'parent-height': parentHeight, bindload, binderror } = props;
     const defaultStyle = {
@@ -75,6 +56,7 @@ const Image = forwardRef((props, ref) => {
         height: DEFAULT_IMAGE_HEIGHT
     };
     const styleObj = extendObject({}, defaultStyle, style, { overflow: 'hidden' });
+    const state = useRef({});
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, {
         defaultStyle
@@ -88,19 +70,13 @@ const Image = forwardRef((props, ref) => {
     const onLayout = ({ nativeEvent: { layout: { width, height } } }) => {
         state.current.viewWidth = width;
         state.current.viewHeight = height;
-        // 实际渲染尺寸可能会指定的值不一致，误差低于 0.5 则认为没有变化
-        if (Math.abs(viewHeight - height) < 0.5 && Math.abs(viewWidth - width) < 0.5) {
-            if (state.current.imageWidth && state.current.imageHeight && state.current.ratio) {
-                if (!loaded)
-                    setLoaded(true);
-            }
-            return;
-        }
         if (state.current.imageWidth && state.current.imageHeight && state.current.ratio) {
+            setViewWidth(width);
+            setViewHeight(height);
             setRatio(state.current.ratio);
             setImageWidth(state.current.imageWidth);
             setImageHeight(state.current.imageHeight);
-            setViewSize(state.current.viewWidth, state.current.viewHeight, state.current.ratio);
+            state.current = {};
             setLoaded(true);
         }
     };
@@ -120,56 +96,43 @@ const Image = forwardRef((props, ref) => {
     const [imageHeight, setImageHeight] = useState(0);
     const [ratio, setRatio] = useState(0);
     const [loaded, setLoaded] = useState(!isLayoutMode);
-    const state = useRef({
-        viewWidth,
-        viewHeight
-    });
-    function setViewSize(viewWidth, viewHeight, ratio) {
-        // 在特定模式下可预测 view 的变化，在onLayout触发时能以此避免重复render
-        switch (mode) {
-            case 'widthFix': {
-                setViewWidth(viewWidth);
-                const fixedHeight = getFixedHeight(viewWidth, viewHeight, ratio);
-                setViewHeight(fixedHeight);
-                break;
-            }
-            case 'heightFix': {
-                setViewHeight(viewHeight);
-                const fixedWidth = getFixedWidth(viewWidth, viewHeight, ratio);
-                setViewWidth(fixedWidth);
-                break;
-            }
-            default:
-                setViewHeight(viewHeight);
-                setViewWidth(viewWidth);
-                break;
-        }
-    }
+    const fixedHeight = useMemo(() => {
+        const fixed = viewWidth * ratio;
+        return !fixed ? viewHeight : fixed;
+    }, [ratio, viewWidth, viewHeight]);
+    const fixedWidth = useMemo(() => {
+        if (!ratio)
+            return viewWidth;
+        const fixed = viewHeight / ratio;
+        return !fixed ? viewWidth : fixed;
+    }, [ratio, viewWidth, viewHeight]);
     const modeStyle = useMemo(() => {
         if (noMeetCalcRule(isSvg, mode, viewWidth, viewHeight, ratio))
             return {};
         switch (mode) {
-            case 'scaleToFill': // wx 中 svg 图片的 scaleToFill 模式效果与 aspectFit 一致，不会就行图片缩放，此处保持一致
+            case 'scaleToFill':
             case 'aspectFit':
                 if (isSvg) {
-                    const scale = getFitScale(imageWidth, imageHeight, viewWidth, viewHeight);
+                    const scale = ratio <= 1
+                        ? imageWidth >= viewWidth ? viewWidth / imageWidth : imageWidth / viewWidth
+                        : imageHeight >= viewHeight ? viewHeight / imageHeight : imageHeight / viewHeight;
                     return {
                         transform: [
-                            { translateY: relativeCenteredSize(viewHeight, imageHeight * scale) },
-                            { translateX: relativeCenteredSize(viewWidth, imageWidth * scale) },
-                            { scale }
+                            { scale },
+                            ratio <= 1 ? { translateY: -(imageHeight * scale - viewHeight) / 2 / scale } : { translateX: -(imageWidth * scale - viewWidth) / 2 / scale }
                         ]
                     };
                 }
                 return {};
             case 'aspectFill':
                 if (isSvg) {
-                    const scale = getFillScale(imageWidth, imageHeight, viewWidth, viewHeight);
+                    const scale = ratio >= 1
+                        ? imageWidth >= viewWidth ? viewWidth / imageWidth : imageWidth / viewWidth
+                        : imageHeight >= viewHeight ? viewHeight / imageHeight : imageHeight / viewHeight;
                     return {
                         transform: [
-                            { translateY: relativeCenteredSize(viewHeight, imageHeight * scale) },
-                            { translateX: relativeCenteredSize(viewWidth, imageWidth * scale) },
-                            { scale }
+                            { scale },
+                            ratio >= 1 ? { translateY: -(imageHeight * scale - viewHeight) / 2 / scale } : { translateX: -(imageWidth * scale - viewWidth) / 2 / scale }
                         ]
                     };
                 }
@@ -177,7 +140,9 @@ const Image = forwardRef((props, ref) => {
             case 'widthFix':
             case 'heightFix':
                 if (isSvg) {
-                    const scale = getFitScale(imageWidth, imageHeight, viewWidth, viewHeight);
+                    const scale = ratio >= 1
+                        ? imageWidth >= fixedWidth ? fixedWidth / imageWidth : imageWidth / fixedWidth
+                        : imageHeight >= fixedHeight ? fixedHeight / imageHeight : imageHeight / fixedHeight;
                     return {
                         transform: [{ scale }]
                     };
@@ -240,23 +205,12 @@ const Image = forwardRef((props, ref) => {
             default:
                 return {};
         }
-    }, [isSvg, mode, viewWidth, viewHeight, imageWidth, imageHeight, ratio]);
+    }, [isSvg, mode, viewWidth, viewHeight, imageWidth, imageHeight, ratio, fixedWidth, fixedHeight]);
     const onSvgLoad = (evt) => {
         const { width, height } = evt.nativeEvent.layout;
-        state.current.imageHeight = height;
+        setRatio(!width ? 0 : height / width);
+        setImageWidth(width);
         setImageHeight(height);
-        state.current.ratio = !width ? 0 : height / width;
-        if (isWidthFixMode
-            ? state.current.viewWidth
-            : isHeightFixMode
-                ? state.current.viewHeight
-                : state.current.viewWidth && state.current.viewHeight) {
-            setRatio(state.current.ratio);
-            setImageWidth(width);
-            setImageHeight(height);
-            setViewSize(state.current.viewWidth, state.current.viewHeight, state.current.ratio);
-            setLoaded(true);
-        }
         bindload && bindload(getCustomEvent('load', evt, {
             detail: { width, height },
             layoutRef
@@ -294,10 +248,12 @@ const Image = forwardRef((props, ref) => {
                     : isHeightFixMode
                         ? state.current.viewHeight
                         : state.current.viewWidth && state.current.viewHeight) {
-                    setRatio(state.current.ratio);
+                    state.current.viewWidth && setViewWidth(state.current.viewWidth);
+                    state.current.viewHeight && setViewHeight(state.current.viewHeight);
+                    setRatio(!width ? 0 : height / width);
                     setImageWidth(width);
                     setImageHeight(height);
-                    setViewSize(state.current.viewWidth, state.current.viewHeight, state.current.ratio);
+                    state.current = {};
                     setLoaded(true);
                 }
             }, () => {
@@ -307,7 +263,7 @@ const Image = forwardRef((props, ref) => {
     }, [src, isSvg, isLayoutMode]);
     const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
-        style: extendObject({}, normalStyle, layoutStyle, isHeightFixMode ? { width: viewWidth } : {}, isWidthFixMode ? { height: viewHeight } : {})
+        style: extendObject({}, normalStyle, layoutStyle, isHeightFixMode ? { width: fixedWidth } : {}, isWidthFixMode ? { height: fixedHeight } : {})
     }), [
         'src',
         'mode',
@@ -315,25 +271,31 @@ const Image = forwardRef((props, ref) => {
     ], {
         layoutRef
     });
-    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,
-        style: extendObject({
-            transformOrigin: 'left top',
-            width: isCropMode ? imageWidth : '100%',
-            height: isCropMode ? imageHeight : '100%'
-        }, isCropMode ? modeStyle : {})
-    }, isLayoutMode ? {} : innerProps), enableFastImage);
-    const LayoutImage = createElement(View, innerProps, loaded && BaseImage);
-    const finalComponent = isSvg ? SvgImage : isLayoutMode ? LayoutImage : BaseImage;
+    function renderSvgImage() {
+        return createElement(View, innerProps, createElement(SvgCssUri, {
+            uri: src,
+            onLayout: onSvgLoad,
+            onError: binderror && onSvgError,
+            style: extendObject({ transformOrigin: 'left top' }, modeStyle)
+        }));
+    }
+    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 ? renderSvgImage() : isLayoutMode ? renderLayoutImage() : renderBaseImage();
     if (hasPositionFixed) {
         return createElement(Portal, null, finalComponent);
     }