feat(wx-react): 提供 reactCompHelper方法，方便手动对齐组件

Author: ykforerlang

packages/wx-react/miniprogram_dist/index.js

@@ -199,21 +199,6 @@ function getPropsMethod(wxInst, key) {
     }
 }
 
-/**
- * onX
- * @param name
- * @returns {boolean}
- */
-function isEventProp(name) {
-    if (!name || name.length <= 3) return false;
-    const trCode = name.charCodeAt(2);
-    return name.charCodeAt(0) === 111
-        && name.charCodeAt(1) === 110
-        && trCode >= 65
-        && trCode <= 90;
-}
-
-
 // 外层占位View， 作用是撑满小程序自定义组件生成的View
 const DEFAULTCONTAINERSTYLE = '_5_';
 
@@ -332,6 +317,37 @@ function cleanPageComp(pageComp) {
     invokeWillUnmount(allChildren);
 }
 
+function reactCompHelper(obj) {
+    obj.properties = {
+        ...obj.properties,
+        diuu: null,
+    };
+
+    const rawAttached = obj.attached;
+    obj.attached = function () {
+        const rawData = this.data;
+        Object.defineProperty(this, 'data', {
+            get: function () {
+                const  compInst = instanceManager.getCompInstByUUID(rawData.diuu);
+                return {
+                    ...rawData,
+                    ...compInst.props
+                }
+            },
+        });
+        rawAttached && rawAttached.call(this);
+        instanceManager.setWxCompInst(this.data.diuu, this);
+    };
+
+    const rawDetached = obj.detached;
+    obj.detached = function () {
+        rawDetached && rawDetached.call(this);
+        instanceManager.removeUUID(this.data.diuu);
+    };
+
+    return obj
+}
+
 /**
  * Copyright (c) Areslabs.
  *
@@ -1591,7 +1607,7 @@ function updateRNBaseComponent(vnode, parentInst, parentContext, data, oldData,
             } else {
                 data[`${diuuKey}onRefreshPassed`] = false;
             }
-        } else if (isEventProp(k)) {
+        } else if (typeof v === 'function') {
             inst.props[k] = reactEnvWrapper(v);
         } else {
             //避免小程序因为setData undefined报错
@@ -1862,7 +1878,7 @@ function updateBaseView(vnode, parentInst, parentContext, data, oldData, dataPat
 
         if (k === 'src') {
             data[`${vnodeDiuu}${k}`] = v.uri || v;
-        } else if (isEventProp(k)) {
+        } else if (typeof v === 'function') {
             eventProps.push(k);
         } else if (k === 'mode') {
             data[`${vnodeDiuu}${k}`] = resizeMode(v);
@@ -2568,10 +2584,11 @@ var index = {
     instanceManager,
     getPropsMethod,
     unstable_batchedUpdates,
-    renderApp
+    renderApp,
+    reactCompHelper
 };
 const h = createElement;
 const render$1 = deprecated;
 
 export default index;
-export { Component, FuncComponent, HocComponent, PureComponent, RNBaseComponent, WxNormalComp, createElement, flattenStyle, getPropsMethod, h, instanceManager, parseElement, render$1 as render, renderApp, renderPage, styleType, tackleWithStyleObj, unstable_batchedUpdates };
+export { Component, FuncComponent, HocComponent, PureComponent, RNBaseComponent, WxNormalComp, createElement, flattenStyle, getPropsMethod, h, instanceManager, parseElement, reactCompHelper, render$1 as render, renderApp, renderPage, styleType, tackleWithStyleObj, unstable_batchedUpdates };

packages/wx-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@areslabs/wx-react",
-  "version": "1.0.30",
+  "version": "1.0.31",
   "description": "微信版本的React",
   "files": [
     "miniprogram_dist",

packages/wx-react/src/index.js

@@ -12,7 +12,7 @@ import WxNormalComp from './WxNormalComp'
 import tackleWithStyleObj, {parseElement, flattenStyle} from './tackleWithStyleObj'
 import styleType from './styleType'
 import instanceManager from './InstanceManager'
-import {getPropsMethod} from './util'
+import {getPropsMethod, reactCompHelper} from './util'
 import {unstable_batchedUpdates, renderPage, renderApp} from './UpdateStrategy'
 
 
@@ -40,7 +40,8 @@ export default {
     instanceManager,
     getPropsMethod,
     unstable_batchedUpdates,
-    renderApp
+    renderApp,
+    reactCompHelper
 }
 
 export {
@@ -59,7 +60,8 @@ export {
     instanceManager,
     getPropsMethod,
     unstable_batchedUpdates,
-    renderApp
+    renderApp,
+    reactCompHelper
 }
 export const h = createElement
 export const render = deprecated

packages/wx-react/src/render.js

@@ -9,7 +9,7 @@
 import instanceManager from './InstanceManager'
 import geneUUID from './geneUUID'
 import tackleWithStyleObj from './tackleWithStyleObj'
-import { DEFAULTCONTAINERSTYLE, filterContext, getCurrentContext, isEventProp, ReactWxEventMap, getRealOc} from './util'
+import { DEFAULTCONTAINERSTYLE, filterContext, getCurrentContext, ReactWxEventMap, getRealOc} from './util'
 import { CPTComponent, FuncComponent, RNBaseComponent, HocComponent } from './AllComponent'
 
 import {UPDATE_EFFECT, INIT_EFFECT, UpdateState, ForceUpdate, mpRoot} from './constants'
@@ -530,7 +530,7 @@ function updateRNBaseComponent(vnode, parentInst, parentContext, data, oldData,
             } else {
                 data[`${diuuKey}onRefreshPassed`] = false
             }
-        } else if (isEventProp(k)) {
+        } else if (typeof v === 'function') {
             inst.props[k] = reactEnvWrapper(v)
         } else {
             //避免小程序因为setData undefined报错
@@ -801,7 +801,7 @@ function updateBaseView(vnode, parentInst, parentContext, data, oldData, dataPat
 
         if (k === 'src') {
             data[`${vnodeDiuu}${k}`] = v.uri || v
-        } else if (isEventProp(k)) {
+        } else if (typeof v === 'function') {
             eventProps.push(k)
         } else if (k === 'mode') {
             data[`${vnodeDiuu}${k}`] = resizeMode(v)

packages/wx-react/src/util.js

@@ -17,21 +17,6 @@ export function getPropsMethod(wxInst, key) {
     }
 }
 
-/**
- * onX
- * @param name
- * @returns {boolean}
- */
-export function isEventProp(name) {
-    if (!name || name.length <= 3) return false;
-    const trCode = name.charCodeAt(2);
-    return name.charCodeAt(0) === 111
-        && name.charCodeAt(1) === 110
-        && trCode >= 65
-        && trCode <= 90;
-}
-
-
 // 外层占位View， 作用是撑满小程序自定义组件生成的View
 export const DEFAULTCONTAINERSTYLE = '_5_'
 
@@ -150,3 +135,35 @@ export function cleanPageComp(pageComp) {
     invokeWillUnmount(allChildren)
 }
 
+export function reactCompHelper(obj) {
+    obj.properties = {
+        ...obj.properties,
+        diuu: null,
+    }
+
+    const rawAttached = obj.attached
+    obj.attached = function () {
+        const rawData = this.data
+        Object.defineProperty(this, 'data', {
+            get: function () {
+                const  compInst = instanceManager.getCompInstByUUID(rawData.diuu);
+                return {
+                    ...rawData,
+                    ...compInst.props
+                }
+            },
+        })
+        rawAttached && rawAttached.call(this)
+        instanceManager.setWxCompInst(this.data.diuu, this)
+    }
+
+    const rawDetached = obj.detached
+    obj.detached = function () {
+        rawDetached && rawDetached.call(this)
+        instanceManager.removeUUID(this.data.diuu)
+    }
+
+    return obj
+}
+
+