fix(wx-react): 修改DiuuKey的判断方式

Author: ykforerlang

packages/wx-react/miniprogram_dist/AllComponent.js

@@ -89,6 +89,7 @@ export class BaseComponent {
         const allData = getObjSubData(this._r)
         const wxInst = instanceManager.getWxInstByUUID(diuu)
 
+        console.log('first wow:', allData, this)
         if (Object.keys(allData).length === 0) {
             recursionMount(this)
         } else {
@@ -123,6 +124,7 @@ export class BaseComponent {
         const topWX = styleUpdater ? styleUpdater.inst : this.getWxInst()
         let hasGprAdd = false
         topWX.groupSetData(() => {
+            console.log('update wow:', updaterList)
             for(let i = 0; i < updaterList.length; i ++ ) {
                 const {inst, data} = updaterList[i]
                 if (!hasGprAdd) {
@@ -147,19 +149,17 @@ export class BaseComponent {
      */
     updateWXInner(doneCb, updaterList, groupPromise) {
         const updatePros = []
+        const updateObj = {}
         const children = this._c
         for (let i = 0; i < children.length; i++) {
             const childUuid = children[i]
             const child = instanceManager.getCompInstByUUID(childUuid)
 
             if (child.firstRender !== FR_DONE && child.hocWrapped) {
-                /**
-                 * 如果child 是由hoc包裹，由于hoc包裹的组件，并不直接对应微信实例，所以无法通过微信的ready的声明周期来执行
-                 * firstRender。不过此时微信小程序实例已经存在，所以可以直接调用setData方法
-                 */
                 const allSubData = getObjSubData(child._r)
                 const wxInst = child.getWxInst()
 
+                // HOC 多次嵌套的情况，allSubData可能是{}
                 if (Object.keys(allSubData).length === 0) {
                     recursionMount(child)
                     updatePros.push(P_R)
@@ -180,9 +180,13 @@ export class BaseComponent {
                     updatePros.push(p)
                 }
             } else if (child.firstRender !== FR_DONE && !child.hocWrapped) {
-                // 新增普通节点，通过微信的ready 生命周期 触发firstRender
-                const p = new Promise((resolve) => {
-                    child.firstRenderRes = resolve
+                updateObj[`${child._keyPath}R`] = getObjSubData(child._r)
+
+                const p = new Promise(resolve => {
+                    groupPromise.then(() => {
+                        recursionMount(child)
+                        resolve()
+                    })
                 })
                 updatePros.push(p)
             } else if (child.shouldUpdate) {
@@ -209,6 +213,7 @@ export class BaseComponent {
 
 
         const cp = getChangePath(this._r, this._or)
+        Object.assign(cp, updateObj)
         if (Object.keys(cp).length === 0) {
             updatePros.push(P_R)
         } else {
@@ -361,7 +366,7 @@ export class Component extends BaseComponent {
             while (true) {
                 const pp = p._p
                 if (pp.isPageComp || !p._isFirstEle) {
-                    const stylePath = p._stylePath
+                    const stylePath = `${p._keyPath}style`
                     setDeepData(pp, newOutStyle, stylePath)
 
                     const diuu = pp.__diuu__

packages/wx-react/miniprogram_dist/WxCPTComp.js

@@ -23,10 +23,7 @@ export default function () {
 
         ready() {
             const compInst = instanceManager.getCompInstByUUID(this.data.diuu)
-            // 一般情况下 CPTComp 都是无状态组件， 但是由于HOC的存在， 对于HOC包裹的组件， 需要主动firstUpdateUI
-            if (!compInst.firstRender && !compInst.stateless) {
-                compInst.firstUpdateUI()
-            }
+
         },
 
         detached() {

packages/wx-react/miniprogram_dist/WxNormalComp.js

@@ -26,7 +26,7 @@ export default function (CompMySelf, RNApp) {
 
         ready() {
             const compInst = instanceManager.getCompInstByUUID(this.data.diuu)
-            if (!compInst.firstRender) {
+            if (compInst.isPageComp) {
                 compInst.firstUpdateUI()
             }
         },

packages/wx-react/miniprogram_dist/getObjSubData.js

@@ -10,7 +10,8 @@ import instanceManager from "./InstanceManager";
 import {HOCKEY, FR_PENDING} from './util'
 
 function isDiuuKey(key) {
-    return key.startsWith("DIUU") && key.length === 9
+    // TODO 更加精确的方式？？
+    return key.includes('DIUU')
 }
 
 function getListSubData(list) {

packages/wx-react/miniprogram_dist/render.js

@@ -209,7 +209,7 @@ export default function render(vnode, parentInst, parentContext, data, oldData,
                     // 当Ua的key由Ka --> Kb 的时候， 那么组件变为Ub负责来渲染这一块， 故而需要给予Ub对应的数据
                     // 对于明确且唯一的key，  小程序和React处理是一致的
                     const vIndex = data[datakey].v.length - 1
-                    render(subVnode, parentInst, parentContext, subData, oldSubDataKeyMap[subKey], `${dataPath}.${datakey}.v.${vIndex}`)
+                    render(subVnode, parentInst, parentContext, subData, oldSubDataKeyMap[subKey], `${dataPath}.${datakey}.v.[${vIndex}]`)
                 }
             } else {
                 let oldSubData = null
@@ -640,7 +640,7 @@ function reportSubStyleToOuter(parentDiuu, subVnode, inst, parentInst, dataPath)
         const styleValue = 'display: none;'
         setStyleData(parentInst, outStyleKey, styleValue, dataPath)
         inst._myOutStyle = styleValue
-        inst._stylePath = `${dataPath}.${outStyleKey}`
+        inst._keyPath = `${dataPath}.${parentDiuu}`
         return
     }
 
@@ -655,7 +655,7 @@ function reportSubStyleToOuter(parentDiuu, subVnode, inst, parentInst, dataPath)
     const styleValue = inst._r[styleKey]
 
     inst._myOutStyle = styleValue
-    inst._stylePath = `${dataPath}.${outStyleKey}`
+    inst._keyPath = `${dataPath}.${parentDiuu}`
 
 
     inst._r[styleKey] = DEFAULTCONTAINERSTYLE

packages/wx-react/miniprogram_dist/util.js

@@ -74,7 +74,17 @@ export function setDeepData(inst, v, path) {
     let tmpObj = inst
     for (let i = 0; i < arr.length - 1; i++) {
         const sk = arr[i]
-        tmpObj = tmpObj[sk]
+
+        if (sk.charAt(0) === '[' && sk.charAt(sk.length - 1) === ']') {
+            const index = Number(sk.substring(1, sk.length - 1))
+            if (!Number.isNaN(index)) {
+                tmpObj = tmpObj[index]
+            } else {
+                tmpObj = tmpObj[sk]
+            }
+        } else {
+            tmpObj = tmpObj[sk]
+        }
     }
 
     const endk = arr[arr.length - 1]