@mpxjs/core 2.9.16 → 2.9.19-react.0

package/@types/index.d.ts

@@ -262,7 +262,7 @@ interface MpxConfig {
   ignoreProxyWhiteList: Array<string>
   observeClassInstance: boolean | Array<AnyConstructor>
   errorHandler: (e: Error, target: ComponentIns<{}, {}, {}, {}, []>, hookName: string) => any | null
-  proxyEventHandler: (e: Event) => any | null
+  proxyEventHandler: (e: WechatMiniprogram.CustomEvent) => any | null
   setDataHandler: (data: object, target: ComponentIns<{}, {}, {}, {}, []>) => any | null
   forceFlushSync: boolean,
   webRouteConfig: object,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/core",
-  "version": "2.9.16",
+  "version": "2.9.19-react.0",
   "description": "mpx runtime core",
   "keywords": [
     "miniprogram",
@@ -19,7 +19,7 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@mpxjs/utils": "^2.9.1",
+    "@mpxjs/utils": "^2.9.19-react.0",
     "lodash": "^4.1.1",
     "miniprogram-api-typings": "^3.10.0"
   },
@@ -47,5 +47,5 @@
     "url": "https://github.com/didi/mpx/issues"
   },
   "sideEffects": false,
-  "gitHead": "60cfd1708a61c925d5fc08cca0b31a06b2c4c160"
+  "gitHead": "a09ab1b994eaf20b1772491709580fe75499e688"
 }

package/src/convertor/convertor.js

@@ -11,6 +11,7 @@ import wxToQqRule from './wxToQq'
 import wxToTtRule from './wxToTt'
 import wxToDdRule from './wxToDd'
 import wxToJdRule from './wxToJd'
+import wxToReactRule from './wxToReact'
 
 // 根据当前环境获取的默认生命周期信息
 let lifecycleInfo
@@ -55,7 +56,9 @@ const rulesMap = {
   wxToQq: { ...defaultConvertRule, ...wxToQqRule },
   wxToTt: { ...defaultConvertRule, ...wxToTtRule },
   wxToDd: { ...defaultConvertRule, ...wxToDdRule },
-  wxToJd: { ...defaultConvertRule, ...wxToJdRule }
+  wxToJd: { ...defaultConvertRule, ...wxToJdRule },
+  wxToIos: { ...defaultConvertRule, ...wxToReactRule },
+  wxToAndroid: { ...defaultConvertRule, ...wxToReactRule }
 }
 
 export function getConvertRule (convertMode) {

package/src/convertor/getConvertMode.js

@@ -5,7 +5,9 @@ const convertModes = {
   'wx-qq': 'wxToQq',
   'wx-tt': 'wxToTt',
   'wx-jd': 'wxToJd',
-  'wx-dd': 'wxToDd'
+  'wx-dd': 'wxToDd',
+  'wx-ios': 'wxToIos',
+  'wx-android': 'wxToAndroid'
 }
 
 export function getConvertMode (srcMode) {

package/src/convertor/wxToReact.js

@@ -0,0 +1,31 @@
+import {
+  error,
+  isDev
+} from '@mpxjs/utils'
+import { implemented } from '../core/implement'
+
+// 暂不支持的wx选项，后期需要各种花式支持
+const unsupported = ['relations', 'moved', 'definitionFilter', 'onShareAppMessage', 'options', 'behaviors', 'externalClasses']
+
+function convertErrorDesc (key) {
+  error(`Options.${key} is not supported in runtime conversion from wx to react native.`, global.currentResource)
+}
+
+function notSupportTip (options) {
+  unsupported.forEach(key => {
+    if (options[key]) {
+      if (!implemented[key]) {
+        isDev && convertErrorDesc(key)
+        delete options[key]
+      } else if (implemented[key].remove) {
+        delete options[key]
+      }
+    }
+  })
+}
+
+export default {
+  convert (options) {
+    notSupportTip(options)
+  }
+}

package/src/core/proxy.js

@@ -27,7 +27,8 @@ import {
   callWithErrorHandling,
   warn,
   error,
-  getEnvObj
+  getEnvObj,
+  isReact
 } from '@mpxjs/utils'
 import {
   BEFORECREATE,
@@ -124,6 +125,8 @@ export default class MpxProxy {
       this.forceUpdateAll = false
       this.currentRenderTask = null
       this.propsUpdatedFlag = false
+      // react专用，正确触发updated钩子
+      this.pendingUpdatedFlag = false
     }
     this.initApi()
   }
@@ -144,7 +147,7 @@ export default class MpxProxy {
     this.state = CREATED
     this.callHook(CREATED)
 
-    if (__mpx_mode__ !== 'web') {
+    if (__mpx_mode__ !== 'web' && !isReact) {
       this.initRender()
     }
 
@@ -166,9 +169,9 @@ export default class MpxProxy {
 
   mounted () {
     if (this.state === CREATED) {
-      this.state = MOUNTED
       // 用于处理refs等前置工作
       this.callHook(BEFOREMOUNT)
+      this.state = MOUNTED
       this.callHook(MOUNTED)
       this.currentRenderTask && this.currentRenderTask.resolve()
     }
@@ -191,8 +194,8 @@ export default class MpxProxy {
     this.callHook(BEFOREUNMOUNT)
     this.scope?.stop()
     if (this.update) this.update.active = false
-    this.callHook(UNMOUNTED)
     this.state = UNMOUNTED
+    this.callHook(UNMOUNTED)
   }
 
   isUnmounted () {
@@ -228,7 +231,12 @@ export default class MpxProxy {
   }
 
   initProps () {
-    this.props = diffAndCloneA(this.target.__getProps(this.options)).clone
+    if (isReact) {
+      // react模式下props内部对象透传无需深clone，依赖对象深层的数据响应触发子组件更新
+      this.props = this.target.__getProps()
+    } else {
+      this.props = diffAndCloneA(this.target.__getProps(this.options)).clone
+    }
     reactive(this.props)
     proxy(this.target, this.props, undefined, false, this.createProxyConflictHandler('props'))
   }
@@ -594,6 +602,20 @@ export default class MpxProxy {
       this.forceUpdateAll = true
     }
 
+    if (isReact) {
+      // rn中不需要setdata
+      this.forceUpdateData = {}
+      this.forceUpdateAll = false
+      if (this.update) {
+        options.sync ? this.update() : queueJob(this.update)
+      }
+      if (callback) {
+        callback = callback.bind(this.target)
+        options.sync ? callback() : nextTick(callback)
+      }
+      return
+    }
+
     if (this.effect) {
       options.sync ? this.effect.run() : this.effect.update()
     } else {

package/src/core/transferOptions.js

@@ -7,6 +7,10 @@ export default function transferOptions (options, type, needConvert = true) {
   let currentInject
   if (global.currentInject && global.currentInject.moduleId === global.currentModuleId) {
     currentInject = global.currentInject
+  } else {
+    currentInject = {
+      moduleId: global.currentModuleId
+    }
   }
   // 文件编译路径
   options.mpxFileResource = global.currentResource
@@ -18,8 +22,12 @@ export default function transferOptions (options, type, needConvert = true) {
     // 编译计算属性注入
     options.computed = Object.assign({}, currentInject.injectComputed, options.computed)
   }
+  if (currentInject && currentInject.injectMethods) {
+    // 编译methods注入
+    options.methods = Object.assign({}, currentInject.injectMethods, options.methods)
+  }
   if (currentInject && currentInject.injectOptions) {
-    // 编译option注入,优先微信中的单独配置
+    // 编译options注入,优先微信中的单独配置
     options.options = Object.assign({}, currentInject.injectOptions, options.options)
   }
   if (currentInject && currentInject.pageEvents) {

package/src/{vuePlugin.js → external/vuePlugin.js}

@@ -1,19 +1,5 @@
-import { walkChildren, parseSelector, error, hasOwn } from '@mpxjs/utils'
+import { walkChildren, parseSelector, error, collectDataset } from '@mpxjs/utils'
 import { createSelectorQuery, createIntersectionObserver } from '@mpxjs/api-proxy'
-const datasetReg = /^data-(.+)$/
-
-function collectDataset (attrs) {
-  const dataset = {}
-  for (const key in attrs) {
-    if (hasOwn(attrs, key)) {
-      const matched = datasetReg.exec(key)
-      if (matched) {
-        dataset[matched[1]] = attrs[key]
-      }
-    }
-  }
-  return dataset
-}
 
 export default function install (Vue) {
   Vue.prototype.triggerEvent = function (eventName, eventDetail) {

package/src/index.js

@@ -1,4 +1,4 @@
-import Vue from './vue'
+import Vue from './external/vue'
 import { error, diffAndCloneA, hasOwn, makeMap } from '@mpxjs/utils'
 import { APIs, InstanceAPIs } from './platform/export/api'
 
@@ -143,7 +143,11 @@ Mpx.config = {
     hostWhitelists Array 类型 支持h5域名白名单安全校验
     apiImplementations webview JSSDK接口 例如getlocation
    */
-  webviewConfig: {}
+  webviewConfig: {},
+   /**
+   * react-native 相关配置，用于挂载事件等，如 onShareAppMessage
+   */
+  rnConfig: {}
 }
 
 global.__mpx = Mpx

package/src/platform/builtInMixins/directiveHelperMixin.android.js

@@ -0,0 +1,2 @@
+import directiveHelperMixin from './directiveHelperMixin.ios'
+export default directiveHelperMixin

package/src/platform/builtInMixins/directiveHelperMixin.ios.js

@@ -0,0 +1,15 @@
+import { warn, type } from '@mpxjs/utils'
+export default function directiveHelperMixin () {
+  return {
+    methods: {
+      __getWxKey (item, key) {
+        const value = key === '*this' ? item : item[key]
+        if (typeof value === 'string' || typeof value === 'number') {
+          return value
+        } else {
+          warn(`wx:key's value should return a string or a number, received: ${type(value)}`, this.__mpxProxy.options.mpxFileResource)
+        }
+      }
+    }
+  }
+}

package/src/platform/builtInMixins/directiveHelperMixin.js

@@ -0,0 +1,3 @@
+export default function directiveHelperMixin () {
+  return {}
+}

package/src/platform/builtInMixins/index.js

@@ -10,10 +10,20 @@ import pageScrollMixin from './pageScrollMixin'
 import componentGenericsMixin from './componentGenericsMixin'
 import getTabBarMixin from './getTabBarMixin'
 import pageRouteMixin from './pageRouteMixin'
+import styleHelperMixin from './styleHelperMixin'
+import directiveHelperMixin from './directiveHelperMixin'
+import { isReact } from '@mpxjs/utils'
 
 export default function getBuiltInMixins (options, type) {
-  let bulitInMixins = []
-  if (__mpx_mode__ === 'web') {
+  let bulitInMixins
+  if (isReact) {
+    bulitInMixins = [
+      proxyEventMixin(),
+      directiveHelperMixin(),
+      styleHelperMixin(),
+      refsMixin()
+    ]
+  } else if (__mpx_mode__ === 'web') {
     bulitInMixins = [
       proxyEventMixin(),
       refsMixin(),

package/src/platform/builtInMixins/proxyEventMixin.android.js

@@ -0,0 +1,2 @@
+import proxyEventMixin from './proxyEventMixin.ios'
+export default proxyEventMixin

package/src/platform/builtInMixins/proxyEventMixin.ios.js

@@ -0,0 +1,49 @@
+import { error } from '@mpxjs/utils'
+import Mpx from '../../index'
+
+export default function proxyEventMixin () {
+  const methods = {
+    __invoke (rawEvent, eventConfig = []) {
+      if (typeof Mpx.config.proxyEventHandler === 'function') {
+        try {
+          Mpx.config.proxyEventHandler(rawEvent)
+        } catch (e) {
+        }
+      }
+      const location = this.__mpxProxy.options.mpxFileResource
+
+      let returnedValue
+      eventConfig.forEach((item) => {
+        const callbackName = item[0]
+        if (callbackName) {
+          const params = item.length > 1
+            ? item.slice(1).map(item => {
+              if (item === '__mpx_event__') {
+                return rawEvent
+              } else {
+                return item
+              }
+            })
+            : [rawEvent]
+          if (typeof this[callbackName] === 'function') {
+            returnedValue = this[callbackName].apply(this, params)
+          } else {
+            error(`Instance property [${callbackName}] is not function, please check.`, location)
+          }
+        }
+      })
+      return returnedValue
+    }
+    // __model (expr, $event, valuePath = ['value'], filterMethod) {
+    //   const innerFilter = {
+    //     trim: val => typeof val === 'string' && val.trim()
+    //   }
+    //   const originValue = valuePath.reduce((acc, cur) => acc[cur], $event.detail)
+    //   const value = filterMethod ? (innerFilter[filterMethod] ? innerFilter[filterMethod](originValue) : typeof this[filterMethod] === 'function' ? this[filterMethod](originValue) : originValue) : originValue
+    //   setByPath(this, expr, value)
+    // }
+  }
+  return {
+    methods
+  }
+}

package/src/platform/builtInMixins/proxyEventMixin.js

@@ -1,21 +1,6 @@
-import { setByPath, error, hasOwn, dash2hump } from '@mpxjs/utils'
+import { setByPath, error, dash2hump, collectDataset } from '@mpxjs/utils'
 import Mpx from '../../index'
 
-const datasetReg = /^data-(.+)$/
-
-function collectDataset (props) {
-  const dataset = {}
-  for (const key in props) {
-    if (hasOwn(props, key)) {
-      const matched = datasetReg.exec(key)
-      if (matched) {
-        dataset[matched[1]] = props[key]
-      }
-    }
-  }
-  return dataset
-}
-
 export default function proxyEventMixin () {
   const methods = {
     __invoke ($event) {
@@ -27,7 +12,6 @@ export default function proxyEventMixin () {
       }
       const location = this.__mpxProxy.options.mpxFileResource
       const type = $event.type
-      const emitMode = $event.detail && $event.detail.mpxEmit
       if (!type) {
         error('Event object must have [type] property!', location)
         return
@@ -51,19 +35,9 @@ export default function proxyEventMixin () {
       let returnedValue
       curEventConfig.forEach((item) => {
         const callbackName = item[0]
-        if (emitMode) {
-          $event = $event.detail.data
-        }
         if (callbackName) {
           const params = item.length > 1
             ? item.slice(1).map(item => {
-              // 暂不支持$event.xxx的写法
-              // if (/^\$event/.test(item)) {
-              //   this.__mpxTempEvent = $event
-              //   const value = getByPath(this, item.replace('$event', '__mpxTempEvent'))
-              //   // 删除临时变量
-              //   delete this.__mpxTempEvent
-              //   return value
               if (item === '__mpx_event__') {
                 return $event
               } else {

package/src/platform/builtInMixins/refsMixin.android.js

@@ -0,0 +1,2 @@
+import refsMixin from './refsMixin.ios'
+export default refsMixin

package/src/platform/builtInMixins/refsMixin.ios.js

@@ -0,0 +1,311 @@
+import { BEFORECREATE } from '../../core/innerLifecycle'
+import { noop, isBoolean, dash2hump, warn, collectDataset, hump2dash } from '@mpxjs/utils'
+import { StyleSheet } from 'react-native'
+
+const _createSelectorQuery = (runCb) => {
+  return {
+    exec: (cb = noop) => {
+      runCb().then(res => {
+        cb(res)
+      })
+    },
+    in: () => {
+      warn('please use wx:ref to get NodesRef')
+    },
+    select: () => {
+      warn('please use wx:ref to get NodesRef')
+    },
+    selectAll: () => {
+      warn('please use wx:ref to get NodesRef')
+    },
+    selectViewport: () => { // 有点难实现，dimension 目前没有暴露相关 api
+      warn('please use wx:ref')
+    }
+  }
+}
+
+const flushRefFns = (nodeInstances, fns) => {
+  const mountedNodeInstance = nodeInstances
+    .map(instance => instance.getNodeInstance())
+    .filter(({ nodeRef }) => nodeRef.current) // 如果有 nodeRef，表明目前组件处于挂载中
+  if (mountedNodeInstance.length) {
+    return Promise.all(mountedNodeInstance.map(instance => flushFns(instance, fns)))
+  } else {
+    return Promise.resolve(null)
+  }
+}
+
+const flushFns = (nodeInstance, fns) => {
+  return Promise.all(fns.map(fn => fn(nodeInstance))).then((res) => {
+    return res.reduce((preVal, curVal) => {
+      return Object.assign(preVal, curVal)
+    }, {})
+  })
+}
+
+const wrapFn = (fn) => {
+  return (nodeRef) => {
+    return new Promise((resolve) => {
+      fn(nodeRef, resolve)
+    })
+  }
+}
+
+const getMeasureProps = (measureProps = []) => {
+  return wrapFn((nodeInstance, resolve) => {
+    const nodeRef = nodeInstance.nodeRef.current
+    setTimeout(() => {
+      nodeRef.measure(function (x, y, width, height, pageX, pageY) {
+        const rectAndSize = {
+          width,
+          height,
+          left: pageX,
+          top: pageY,
+          right: pageX + width,
+          bottom: pageY + height
+        }
+        const result = measureProps.reduce((preVal, key) => {
+          return Object.assign(preVal, { [key]: rectAndSize[key] || 0 })
+        }, {})
+        resolve(result)
+      })
+    }, 30) // 延迟，等待组件在rn视图上真正渲染出来
+  })
+}
+
+const getDataset = (props) => {
+  return wrapFn((nodeRef, resolve) => {
+    props = nodeRef.props.current
+    resolve({
+      dataset: collectDataset(props)
+    })
+  })
+}
+
+const getPlainProps = (config) => {
+  return wrapFn((nodeRef, resolve) => {
+    const res = {}
+    const props = nodeRef.props.current
+    config.forEach((key) => {
+      // props 属性默认不转驼峰，用户写什么格式不会变化，取值做兼容
+      res[key] = props[key] || props[hump2dash(key)] || ''
+    })
+    resolve(res)
+  })
+}
+
+const getComputedStyle = (config = []) => {
+  return wrapFn((nodeRef, resolve) => {
+    config = new Set(config)
+    const res = {}
+    const styles = nodeRef.props.current.style || []
+    const defaultStyle = nodeRef.instance.defaultStyle || {}
+    const computedStyle = StyleSheet.flatten([defaultStyle, ...styles])
+    config.forEach((key) => {
+      const humpKey = dash2hump(key)
+      // 取 style 的 key 是根据传入的 key 来设置，传什么设置什么 key，只不过取值需要做兼容
+      res[key] = computedStyle[key] || computedStyle[humpKey] || ''
+    })
+
+    resolve(res)
+  })
+}
+
+const getInstanceConfig = (config) => {
+  return wrapFn((nodeRef, resolve) => {
+    const instance = nodeRef.instance
+    resolve({ [config]: instance[config] || {} })
+  })
+}
+
+const defaultScrollOffset = {
+  scrollLeft: 0,
+  scrollTop: 0,
+  scrollHeight: 0,
+  scrollWidth: 0
+}
+
+const getScrollOffset = () => {
+  return wrapFn((nodeRef, resolve) => {
+    const instance = nodeRef.instance
+    resolve((instance.scrollOffset && instance.scrollOffset.current) || defaultScrollOffset)
+  })
+}
+
+// const getScrollOffsetFallback = (cb) => {
+//   const res = {
+//     scrollLeft: 0,
+//     scrollTop: 0,
+//     scrollHeight: 0,
+//     scrollWidth: 0
+//   }
+//   cb(res)
+// }
+
+const RECT = ['left', 'top', 'right', 'bottom']
+const SIZE = ['width', 'height']
+
+function _createNodesRef (nodeRefs = []) {
+  const fields = (config, cb = noop) => {
+    const plainProps = []
+    const measureProps = []
+    const computedStyle = []
+    const fns = []
+
+    for (const key in config) {
+      const value = config[key]
+      if (Array.isArray(value) && value.length) {
+        if (key === 'properties') {
+          // wx 最终输出的 properties 字段都会转化为驼峰，所以在这里提前处理为最终的字段格式
+          plainProps.push(...value.map(v => dash2hump(v)))
+        } else if (key === 'computedStyle') {
+          const _computedStyle = config.computedStyle
+          for (let i = _computedStyle.length - 1; i >= 0; i--) {
+            const style = _computedStyle[i]
+            if (RECT.includes(style) || SIZE.includes(style)) {
+              measureProps.push(style)
+              _computedStyle.splice(i, 1)
+            }
+          }
+          if (_computedStyle.length) {
+            computedStyle.push(..._computedStyle)
+          }
+        }
+      } else if (isBoolean(value) && value) {
+        switch (key) {
+          case 'rect':
+            measureProps.push(...RECT)
+            break
+          case 'size':
+            measureProps.push(...SIZE)
+            break
+          case 'scrollOffset':
+            fns.push(getScrollOffset())
+            break
+          case 'dataset':
+            fns.push(getDataset())
+            break
+          case 'node':
+          case 'context':
+          case 'ref':
+            fns.push(getInstanceConfig(key))
+            break
+          default:
+            plainProps.push(key)
+            break
+        }
+      }
+    }
+
+    if (plainProps.length) {
+      fns.push(getPlainProps(plainProps))
+    }
+    if (measureProps.length) {
+      const nodeInstance = nodeRefs[0] && nodeRefs[0].getNodeInstance()
+      const hasMeasureFn = nodeInstance && nodeInstance.nodeRef.current && nodeInstance.nodeRef.current.measure
+      if (hasMeasureFn) {
+        fns.push(getMeasureProps(measureProps))
+      } else {
+        computedStyle.push(...measureProps)
+      }
+    }
+    if (computedStyle.length) {
+      fns.push(getComputedStyle(computedStyle))
+    }
+
+    const runCb = () => {
+      return flushRefFns(nodeRefs, fns).then((result) => {
+        // wx的数据格式：对于具体方法接受到的回调传参，如果获取的 nodeRef 只有一个，那么只需要返回一条数据而不是数组，但是 exec 里面统一都是数组
+        cb(result && result.length === 1 ? result[0] : result)
+        return result
+      })
+    }
+
+    return _createSelectorQuery(runCb)
+  }
+
+  const boundingClientRect = (cb = noop) => {
+    const config = {
+      id: true,
+      dataset: true,
+      rect: true,
+      size: true
+    }
+    return fields(config, cb)
+  }
+
+  const context = (cb = noop) => {
+    const config = {
+      context: true
+    }
+    return fields(config, cb)
+  }
+
+  const node = (cb = noop) => {
+    const config = {
+      node: true
+    }
+    return fields(config, cb)
+  }
+
+  const ref = (cb = noop) => {
+    const config = {
+      ref: true
+    }
+    return fields(config, cb)
+  }
+
+  const scrollOffset = (cb = noop) => {
+    const config = {
+      id: true,
+      dataset: true,
+      scrollOffset: true
+    }
+    return fields(config, cb)
+  }
+
+  return {
+    fields,
+    boundingClientRect,
+    context,
+    node,
+    ref,
+    scrollOffset
+  }
+}
+
+export default function getRefsMixin () {
+  return {
+    [BEFORECREATE] () {
+      this.__refs = {}
+      this.$refs = {}
+      this.__getRefs()
+    },
+    methods: {
+      __getRefs () {
+        const refs = this.__getRefsData() || []
+        const target = this
+        refs.forEach(({ key, type, all }) => {
+          Object.defineProperty(this.$refs, key, {
+            enumerable: true,
+            configurable: true,
+            get () {
+              const refs = target.__refs[key] || []
+              if (type === 'component') {
+                return all ? refs : refs[0]
+              } else {
+                return _createNodesRef(refs)
+              }
+            }
+          })
+        })
+      },
+      __getRefVal (key) {
+        if (!this.__refs[key]) {
+          this.__refs[key] = []
+        }
+        return (instance) => instance && this.__refs[key].push(instance)
+      }
+    }
+  }
+}

package/src/platform/builtInMixins/styleHelperMixin.android.js

@@ -0,0 +1,2 @@
+import styleHelperMixin from './styleHelperMixin.ios'
+export default styleHelperMixin

package/src/platform/builtInMixins/styleHelperMixin.ios.js

@@ -0,0 +1,135 @@
+import { isObject, isArray, dash2hump, isFunction } from '@mpxjs/utils'
+import { Dimensions } from 'react-native'
+
+function concat (a, b) {
+  return a ? b ? (a + ' ' + b) : a : (b || '')
+}
+
+function stringifyArray (value) {
+  let res = ''
+  let classString
+  for (let i = 0; i < value.length; i++) {
+    if ((classString = stringifyDynamicClass(value[i]))) {
+      if (res) res += ' '
+      res += classString
+    }
+  }
+  return res
+}
+
+function stringifyObject (value) {
+  let res = ''
+  const keys = Object.keys(value)
+  for (let i = 0; i < keys.length; i++) {
+    const key = keys[i]
+    if (value[key]) {
+      if (res) res += ' '
+      res += key
+    }
+  }
+  return res
+}
+
+function stringifyDynamicClass (value) {
+  if (isArray(value)) {
+    value = stringifyArray(value)
+  } else if (isObject(value)) {
+    value = stringifyObject(value)
+  }
+  return value
+}
+
+const listDelimiter = /;(?![^(]*[)])/g
+const propertyDelimiter = /':(.+)'/
+const rpxRegExp = /^\s*(\d+(\.\d+)?)rpx\s*$/
+const pxRegExp = /^\s*(\d+(\.\d+)?)(px)?\s*$/
+
+function parseStyleText (cssText) {
+  const res = {}
+  const arr = cssText.split(listDelimiter)
+  for (let i = 0; i < arr.length; i++) {
+    const item = arr[i]
+    if (item) {
+      const tmp = item.split(propertyDelimiter)
+      if (tmp.length > 1) {
+        const k = dash2hump(tmp[0].trim())
+        res[k] = tmp[1].trim()
+      }
+    }
+  }
+  return res
+}
+
+function normalizeDynamicStyle (value) {
+  if (!value) return {}
+  if (isArray(value)) {
+    return mergeObjectArray(value)
+  }
+  if (typeof value === 'string') {
+    return parseStyleText(value)
+  }
+  return value
+}
+
+function mergeObjectArray (arr) {
+  const res = {}
+  for (let i = 0; i < arr.length; i++) {
+    Object.assign(res, arr[i])
+  }
+  return res
+}
+
+function transformStyleObj (context, styleObj) {
+  const keys = Object.keys(styleObj)
+  const transformed = {}
+  keys.forEach((prop) => {
+    // todo 检测不支持的prop
+    let value = styleObj[prop]
+    let matched
+    if ((matched = pxRegExp.exec(value))) {
+      value = +matched[1]
+    } else if ((matched = rpxRegExp.exec(value))) {
+      value = context.__rpx(+matched[1])
+    }
+    // todo 检测不支持的value
+    transformed[prop] = value
+  })
+  return transformed
+}
+
+export default function styleHelperMixin () {
+  return {
+    methods: {
+      __rpx (value) {
+        const { width } = Dimensions.get('screen')
+        // rn 单位 dp = 1(css)px =  1 物理像素 * pixelRatio(像素比)
+        // px = rpx * (750 / 屏幕宽度)
+        return value * width / 750
+      },
+      __getStyle (staticClass, dynamicClass, staticStyle, dynamicStyle, show) {
+        const result = []
+        if ((staticClass || dynamicClass) && isFunction(this.__getClassMap)) {
+          const classMap = this.__getClassMap()
+          const classString = concat(staticClass, stringifyDynamicClass(dynamicClass))
+          classString.split(' ').forEach((className) => {
+            if (classMap[className]) {
+              result.push(classMap[className])
+            }
+          })
+        }
+
+        if (staticStyle || dynamicStyle) {
+          const styleObj = Object.assign(parseStyleText(staticStyle), normalizeDynamicStyle(dynamicStyle))
+          result.push(transformStyleObj(this, styleObj))
+        }
+
+        if (show === false) {
+          result.push({
+            display: 'none'
+          })
+        }
+        return result
+      }
+    }
+  }
+}

package/src/platform/builtInMixins/styleHelperMixin.js

@@ -0,0 +1,3 @@
+export default function styleHelperMixin () {
+  return {}
+}

package/src/platform/createApp.js

@@ -76,13 +76,13 @@ export default function createApp (option, config = {}) {
     })
   }
   // app选项目前不需要进行转换
-  const { rawOptions } = transferOptions(option, 'app', false)
+  const { rawOptions, currentInject } = transferOptions(option, 'app', false)
   rawOptions.mixins = builtInMixins
   const defaultOptions = filterOptions(spreadProp(mergeOptions(rawOptions, 'app', false), 'methods'), appData)
 
   if (__mpx_mode__ === 'web') {
     global.__mpxOptionsMap = global.__mpxOptionsMap || {}
-    global.__mpxOptionsMap[global.currentModuleId] = defaultOptions
+    global.__mpxOptionsMap[currentInject.moduleId] = defaultOptions
     global.getApp = function () {
       if (!isBrowser) {
         console.error('[Mpx runtime error]: Dangerous API! global.getApp method is running in non browser environments')

package/src/platform/export/api.web.js

@@ -1,4 +1,4 @@
-import Vue from '../../vue'
+import Vue from 'vue'
 import { injectMixins } from '../../core/injectMixins'
 
 const vm = new Vue()

package/src/platform/patch/ali/getDefaultOptions.js

@@ -102,14 +102,14 @@ function initProxy (context, rawOptions, currentInject) {
   }
 }
 
-export function getDefaultOptions (type, { rawOptions = {}, currentInject }) {
+export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
   const hookNames = type === 'component' ? ['onInit', 'didMount', 'didUnmount'] : ['onLoad', 'onReady', 'onUnload']
   const rootMixins = [{
     [hookNames[0]] () {
       if (rawOptions.__nativeRender__ && this.props) {
         const validProps = Object.assign({}, rawOptions.props, rawOptions.properties)
         Object.keys(this.props).forEach((key) => {
-          if (hasOwn(validProps, key) && typeof this.props[key] !== 'function') {
+          if (hasOwn(validProps, key) && !isFunction(this.props[key])) {
             this.data[key] = this.props[key]
           }
         })
@@ -123,7 +123,7 @@ export function getDefaultOptions (type, { rawOptions = {}, currentInject }) {
           const newData = {}
           // 微信原生转换支付宝时，每次props更新将其设置进data模拟微信表现
           Object.keys(nextProps).forEach((key) => {
-            if (hasOwn(validProps, key) && typeof nextProps[key] !== 'function') {
+            if (hasOwn(validProps, key) && !isFunction(nextProps[key])) {
               const { diff, clone } = diffAndCloneA(nextProps[key], this.props[key])
               if (diff) newData[key] = clone
             }
@@ -133,7 +133,7 @@ export function getDefaultOptions (type, { rawOptions = {}, currentInject }) {
           // 由于支付宝中props透传父级setData的值，此处发生变化的属性实例一定不同，只需浅比较即可确定发生变化的属性
           // 支付宝appx2.0版本后props传递发生变化，此处获取到的nextProps和this.props以及父组件setData的数据引用都不一致，进行了两次深克隆，此处this.props和nextProps的比对需要用deep diff
           Object.keys(nextProps).forEach(key => {
-            if (hasOwn(validProps, key) && typeof nextProps[key] !== 'function') {
+            if (hasOwn(validProps, key) && !isFunction(nextProps[key])) {
               const { diff, clone } = diffAndCloneA(nextProps[key], this.props[key])
               // 由于支付宝中透传父级setData的值，此处进行深clone后赋值避免父级存储的miniRenderData部分数据在此处被响应化，在子组件对props赋值时触发父组件的render
               if (diff) this[key] = clone

package/src/platform/patch/index.js

@@ -4,14 +4,15 @@ import { getDefaultOptions as getWxDefaultOptions } from './wx/getDefaultOptions
 import { getDefaultOptions as getAliDefaultOptions } from './ali/getDefaultOptions'
 import { getDefaultOptions as getSwanDefaultOptions } from './swan/getDefaultOptions'
 import { getDefaultOptions as getWebDefaultOptions } from './web/getDefaultOptions'
-import { error } from '@mpxjs/utils'
+import { getDefaultOptions as getReactDefaultOptions } from './react/getDefaultOptions'
+import { error, isReact } from '@mpxjs/utils'
 
 export default function createFactory (type) {
   return (options = {}, { isNative, customCtor, customCtorType } = {}) => {
     options.__nativeRender__ = !!isNative
     options.__type__ = type
     let ctor
-    if (__mpx_mode__ !== 'web') {
+    if (__mpx_mode__ !== 'web' && !isReact) {
       if (customCtor) {
         ctor = customCtor
         customCtorType = customCtorType || type
@@ -39,7 +40,9 @@ export default function createFactory (type) {
     }
 
     let getDefaultOptions
-    if (__mpx_mode__ === 'web') {
+    if (isReact) {
+      getDefaultOptions = getReactDefaultOptions
+    } else if (__mpx_mode__ === 'web') {
       getDefaultOptions = getWebDefaultOptions
     } else if (__mpx_mode__ === 'ali') {
       getDefaultOptions = getAliDefaultOptions
@@ -56,10 +59,10 @@ export default function createFactory (type) {
     // 注入内建的mixins, 内建mixin是按原始平台编写的，所以合并规则和rootMixins保持一致
     // 将合并后的用户定义的rawOptions传入获取当前应该注入的内建mixins
     rawOptions.mixins = getBuiltInMixins(rawOptions, type)
-    const defaultOptions = getDefaultOptions(type, { rawOptions, currentInject })
-    if (__mpx_mode__ === 'web') {
+    const defaultOptions = getDefaultOptions({ type, rawOptions, currentInject })
+    if (__mpx_mode__ === 'web' || isReact) {
       global.__mpxOptionsMap = global.__mpxOptionsMap || {}
-      global.__mpxOptionsMap[global.currentModuleId] = defaultOptions
+      global.__mpxOptionsMap[currentInject.moduleId] = defaultOptions
     } else if (ctor) {
       return ctor(defaultOptions)
     }

package/src/platform/patch/react/getDefaultOptions.android.js

@@ -0,0 +1 @@
+export { getDefaultOptions } from './getDefaultOptions.ios'

package/src/platform/patch/react/getDefaultOptions.ios.js

@@ -0,0 +1,249 @@
+import { useEffect, useSyncExternalStore, useRef, createElement, memo, forwardRef, useImperativeHandle } from 'react'
+import * as reactNative from 'react-native'
+import { ReactiveEffect } from '../../../observer/effect'
+import { hasOwn, isFunction, noop, isObject, error, getByPath, collectDataset } from '@mpxjs/utils'
+import MpxProxy from '../../../core/proxy'
+import { BEFOREUPDATE, UPDATED } from '../../../core/innerLifecycle'
+import mergeOptions from '../../../core/mergeOptions'
+import { queueJob } from '../../../observer/scheduler'
+
+function getNativeComponent (tagName) {
+  return getByPath(reactNative, tagName)
+}
+
+function getRootProps (props) {
+  const rootProps = {}
+  for (const key in props) {
+    if (hasOwn(props, key)) {
+      const match = /^(bind|catch|capture-bind|capture-catch|style):?(.*?)(?:\.(.*))?$/.exec(key)
+      if (match) {
+        rootProps[key] = props[key]
+      }
+    }
+  }
+  return rootProps
+}
+
+function createEffect (proxy, components, props) {
+  const update = proxy.update = () => {
+    // pre render for props update
+    if (proxy.propsUpdatedFlag) {
+      proxy.updatePreRender()
+    }
+    if (proxy.isMounted()) {
+      proxy.callHook(BEFOREUPDATE)
+      proxy.pendingUpdatedFlag = true
+    }
+    // eslint-disable-next-line symbol-description
+    proxy.stateVersion = Symbol()
+    proxy.onStoreChange && proxy.onStoreChange()
+  }
+  update.id = proxy.uid
+  proxy.effect = new ReactiveEffect(() => {
+    return proxy.target.__injectedRender(createElement, components, getNativeComponent, getRootProps(props))
+  }, () => queueJob(update), proxy.scope)
+}
+
+function createInstance ({ propsRef, ref, type, rawOptions, currentInject, validProps, components }) {
+  const instance = Object.create({
+    setData (data, callback) {
+      return this.__mpxProxy.forceUpdate(data, { sync: true }, callback)
+    },
+    __getProps () {
+      const propsData = {}
+      const props = propsRef.current
+      if (props) {
+        Object.keys(props).forEach((key) => {
+          if (hasOwn(validProps, key) && !isFunction(props[key])) {
+            propsData[key] = props[key]
+          }
+        })
+      }
+      return propsData
+    },
+    __getSlot (name) {
+      const { children } = propsRef.current || {}
+      if (children) {
+        const result = []
+        if (Array.isArray(children)) {
+          children.forEach(child => {
+            if (child && child.props && child.props.slot === name) {
+              result.push(child)
+            }
+          })
+        } else {
+          if (children && children.props && children.props.slot === name) {
+            result.push(children)
+          }
+        }
+        return result.filter(item => {
+          if (this.__dispatchedSlotSet.has(item)) {
+            return false
+          } else {
+            this.__dispatchedSlotSet.add(item)
+            return true
+          }
+        })
+      }
+      return null
+    },
+    __injectedRender: currentInject.render || noop,
+    __getRefsData: currentInject.getRefsData || noop,
+    // render helper
+    _i (val, fn) {
+      let i, l, keys, key
+      const result = []
+      if (Array.isArray(val) || typeof val === 'string') {
+        for (i = 0, l = val.length; i < l; i++) {
+          result.push(fn.call(this, val[i], i))
+        }
+      } else if (typeof val === 'number') {
+        for (i = 0; i < val; i++) {
+          result.push(fn.call(this, i + 1, i))
+        }
+      } else if (isObject(val)) {
+        keys = Object.keys(val)
+        for (i = 0, l = keys.length; i < l; i++) {
+          key = keys[i]
+          result.push(fn.call(this, val[key], key, i))
+        }
+      }
+      return result
+    },
+    triggerEvent (eventName, eventDetail) {
+      const props = propsRef.current
+      const handlerName = eventName.replace(/^./, matched => matched.toUpperCase()).replace(/-([a-z])/g, (match, p1) => p1.toUpperCase())
+      const handler = props && (props['bind' + handlerName] || props['catch' + handlerName] || props['capture-bind' + handlerName] || props['capture-catch' + handlerName])
+      if (handler && typeof handler === 'function') {
+        const timeStamp = +new Date()
+        const dataset = collectDataset(props)
+        const id = props.id || ''
+        const eventObj = {
+          type: eventName,
+          timeStamp,
+          target: {
+            id,
+            dataset,
+            targetDataset: dataset
+          },
+          currentTarget: {
+            id,
+            dataset
+          },
+          detail: eventDetail
+        }
+        handler.call(this, eventObj)
+      }
+    },
+    selectComponent () {
+      error('selectComponent is not supported in react native, please use ref instead')
+    },
+    selectAllComponents () {
+      error('selectAllComponents is not supported in react native, please use ref instead')
+    },
+    createSelectorQuery () {
+      error('createSelectorQuery is not supported in react native, please use ref instead')
+    },
+    createIntersectionObserver () {
+      error('createIntersectionObserver is not supported in react native, please use ref instead')
+    },
+    ...rawOptions.methods
+  }, {
+    dataset: {
+      get () {
+        const props = propsRef.current
+        return collectDataset(props)
+      },
+      enumerable: true
+    },
+    id: {
+      get () {
+        const props = propsRef.current
+        return props.id
+      },
+      enumerable: true
+    }
+  })
+
+  const proxy = instance.__mpxProxy = new MpxProxy(rawOptions, instance)
+  proxy.created()
+  Object.assign(proxy, {
+    onStoreChange: null,
+    // eslint-disable-next-line symbol-description
+    stateVersion: Symbol(),
+    subscribe: (onStoreChange) => {
+      if (!proxy.effect) {
+        createEffect(proxy, components, propsRef.current)
+        // eslint-disable-next-line symbol-description
+        proxy.stateVersion = Symbol()
+      }
+      proxy.onStoreChange = onStoreChange
+      return () => {
+        proxy.effect && proxy.effect.stop()
+        proxy.effect = null
+        proxy.onStoreChange = null
+      }
+    },
+    getSnapshot: () => {
+      return proxy.stateVersion
+    }
+  })
+  // react数据响应组件更新管理器
+  if (!proxy.effect) {
+    createEffect(proxy, components, propsRef.current)
+  }
+
+  return instance
+}
+
+export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
+  rawOptions = mergeOptions(rawOptions, type, false)
+  const components = currentInject.getComponents() || {}
+  const validProps = Object.assign({}, rawOptions.props, rawOptions.properties)
+  return memo(forwardRef((props, ref) => {
+    const instanceRef = useRef(null)
+    const propsRef = useRef(props)
+    let isFirst = false
+    if (!instanceRef.current) {
+      isFirst = true
+      instanceRef.current = createInstance({ propsRef, ref, type, rawOptions, currentInject, validProps, components })
+    }
+    const instance = instanceRef.current
+    // reset instance
+    instance.__refs = {}
+    instance.__dispatchedSlotSet = new WeakSet()
+    useImperativeHandle(ref, () => {
+      return instance
+    })
+    const proxy = instance.__mpxProxy
+
+    if (!isFirst) {
+      // 处理props更新
+      propsRef.current = props
+      Object.keys(props).forEach(key => {
+        if (hasOwn(validProps, key) && !isFunction(props[key])) {
+          instance[key] = props[key]
+        }
+      })
+      proxy.propsUpdated()
+    }
+
+    useEffect(() => {
+      if (proxy.pendingUpdatedFlag) {
+        proxy.pendingUpdatedFlag = false
+        proxy.callHook(UPDATED)
+      }
+    })
+
+    useEffect(() => {
+      proxy.mounted()
+      return () => {
+        proxy.unmounted()
+      }
+    }, [])
+
+    useSyncExternalStore(proxy.subscribe, proxy.getSnapshot)
+
+    return proxy.effect.run()
+  }))
+}

package/src/platform/patch/react/getDefaultOptions.js

@@ -0,0 +1 @@
+export function getDefaultOptions () {}

package/src/platform/patch/react/lifecycle.js

@@ -0,0 +1,11 @@
+const COMPONENT_HOOKS = []
+
+const PAGE_HOOKS = []
+
+const APP_HOOKS = []
+
+export const LIFECYCLE = {
+  APP_HOOKS,
+  PAGE_HOOKS,
+  COMPONENT_HOOKS
+}

package/src/platform/patch/swan/getDefaultOptions.js

@@ -1,7 +1,7 @@
 import mergeOptions from '../../../core/mergeOptions'
 import { initProxy, filterOptions } from '../wx/getDefaultOptions'
 
-export function getDefaultOptions (type, { rawOptions = {}, currentInject }) {
+export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
   let hookNames = ['attached', 'ready', 'detached']
   // 当用户传入page作为构造器构造页面时，修改所有关键hooks
   if (rawOptions.__pageCtor__) {

package/src/platform/patch/web/getDefaultOptions.js

@@ -3,7 +3,14 @@ import mergeOptions from '../../../core/mergeOptions'
 import { diffAndCloneA, hasOwn } from '@mpxjs/utils'
 import { getCurrentInstance as getCurrentVueInstance } from '../../export/index'
 import MpxProxy, { setCurrentInstance, unsetCurrentInstance } from '../../../core/proxy'
-import { BEFORECREATE, BEFOREUPDATE, UPDATED, BEFOREUNMOUNT, UNMOUNTED, SERVERPREFETCH } from '../../../core/innerLifecycle'
+import {
+  BEFORECREATE,
+  BEFOREUPDATE,
+  UPDATED,
+  BEFOREUNMOUNT,
+  UNMOUNTED,
+  SERVERPREFETCH
+} from '../../../core/innerLifecycle'
 
 function filterOptions (options) {
   const newOptions = {}
@@ -37,7 +44,7 @@ function initProxy (context, rawOptions) {
   }
 }
 
-export function getDefaultOptions (type, { rawOptions = {} }) {
+export function getDefaultOptions ({ type, rawOptions = {} }) {
   const rawSetup = rawOptions.setup
   if (rawSetup) {
     rawOptions.setup = (props) => {
@@ -78,7 +85,10 @@ export function getDefaultOptions (type, { rawOptions = {} }) {
       if (this.__mpxProxy) this.__mpxProxy.callHook(BEFOREUNMOUNT)
     },
     destroyed () {
-      if (this.__mpxProxy) this.__mpxProxy.callHook(UNMOUNTED)
+      if (this.__mpxProxy) {
+        this.__mpxProxy.state = UNMOUNTED
+        this.__mpxProxy.callHook(UNMOUNTED)
+      }
     },
     serverPrefetch () {
       if (this.__mpxProxy) return this.__mpxProxy.callHook(SERVERPREFETCH)

package/src/platform/patch/wx/getDefaultOptions.js

@@ -141,7 +141,7 @@ export function initProxy (context, rawOptions, currentInject) {
   }
 }
 
-export function getDefaultOptions (type, { rawOptions = {}, currentInject }) {
+export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
   let hookNames = ['attached', 'ready', 'detached']
   // 当用户传入page作为构造器构造页面时，修改所有关键hooks
   if (rawOptions.__pageCtor__) {