perf(wx-react): 重构react和mp之间的数据传输，解决闪屏问题

areslabs · Oct 9, 2019 · b5962f7 · b5962f7
1 parent 96d3177
commit b5962f7
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 282 deletions.
diff --git a/packages/wx-react/miniprogram_dist/AllComponent.js b/packages/wx-react/miniprogram_dist/AllComponent.js
@@ -18,10 +18,7 @@ import {
     FR_PENDING,
     getRealOc,
     invokeWillUnmount,
-    recursionFirstFlushWX,
-    recursionFirstFlushWXSync,
-    getShowUpdaterMap,
-    HIDDEN_STYLE,
+    breadthRecursionFirstFlushWX,
     recursionMountOrUpdate
 } from './util'
 import reactUpdate from './ReactUpdate'
@@ -113,20 +110,6 @@ import shallowEqual from './shallowEqual'
  *  特别的，当Father是页面组件，且是第一次初始化的时候，每一层级的节点将依次产生，一共会发生n（组件树层级）次groupSetData
  *
  *
- *  另外微信小程序自定义组件的 setData行为是这样的（groupSetData同setData），当执行setData以后，新产生A组件的时候，调用如下：
- *
- *  A created
- *  A attached
- *  setData 调用返回
- *  A ready
- *  setData callback 调用
- *
- *  所以这里的setData/groupSetData 调用结束之后，A组件attached的生命周期已经执行，这个时候InstanceManager已经管理A，可以不用等到
- *  callback之后去执行下一次groupSetData
- *
- *  但是其他版本的小程序【百度，支付宝】是否如此，暂无测试，所以保留 sync /async 两个版本的 firstUpdateWX updateWX recursionFirstFlushWX
- *
- *
  */
 export class BaseComponent {
 
@@ -159,22 +142,6 @@ export class BaseComponent {
         return inst.getDeepComp()
     }
 
-    /**
-     * 如果是hocWrapped组件，一直往外追溯
-     * @returns {*}
-     */
-    getTopComp() {
-        if (this.hocWrapped) {
-            let p = this._p
-            while (p.hocWrapped) {
-                p = p._p
-            }
-
-            return instanceManager.getCompInstByUUID(p.__diuu__)
-        } else {
-            return this
-        }
-    }
 
     getWxInst() {
         let diuu = null
@@ -205,53 +172,6 @@ export class BaseComponent {
         }
 
 
-        const pageWxInst = this.getWxInst()
-        const comps = []
-        // 收集下一次groupSetData的实例
-        deepComp._c.forEach(child => {
-            if (child._myOutStyle) {
-                const childComp = child.getDeepComp()
-                comps.push(childComp)
-            }
-        })
-
-        if (comps.length === 0) {
-            pageWxInst.setData({
-                _r: deepComp._r
-            }, () => {
-                recursionMountOrUpdate(this)
-            })
-        } else {
-            const styleKey = deepComp.firstStyleKey
-            const styleValue = deepComp._r[styleKey]
-            const pageShowUpdater = {
-                inst: pageWxInst,
-                data: {
-                    [`_r.${styleKey}`]: styleValue
-                }
-            }
-            pageWxInst.setData({
-                _r: {
-                    ...deepComp._r,
-                    [deepComp.firstStyleKey]: `${styleValue}${HIDDEN_STYLE}`
-                }
-            }, () => {
-                recursionFirstFlushWX(this, pageWxInst, comps, [pageShowUpdater], () => {
-                    recursionMountOrUpdate(this)
-                })
-            })
-        }
-    }
-
-    firstUpdateWXSync() {
-        const deepComp = this.getDeepComp()
-        if (!deepComp || Object.keys(deepComp._r).length === 0) {
-            // 页面组件render null
-            recursionMountOrUpdate(this)
-            return
-        }
-
-
         const pageWxInst = this.getWxInst()
         const comps = []
         // 收集下一次groupSetData的实例
@@ -269,25 +189,13 @@ export class BaseComponent {
                 recursionMountOrUpdate(this)
             })
         } else {
-            const styleKey = deepComp.firstStyleKey
-            const styleValue = deepComp._r[styleKey]
-            const pageShowUpdater = {
-                inst: pageWxInst,
-                data: {
-                    [`_r.${styleKey}`]: styleValue
-                }
-            }
-
             pageWxInst.groupSetData(() => {
                 pageWxInst.setData({
-                    _r: {
-                        ...deepComp._r,
-                        [deepComp.firstStyleKey]: `${styleValue}${HIDDEN_STYLE}`
-                    }
+                    _r: deepComp._r
                 })
 
                 //pageWxInst.setData 之后 已经可以获取子组件实例
-                recursionFirstFlushWXSync(this, pageWxInst, comps, [pageShowUpdater], () => {
+                breadthRecursionFirstFlushWX(comps, () => {
                     recursionMountOrUpdate(this)
                 })
             })
@@ -315,72 +223,13 @@ export class BaseComponent {
             return
         }
 
-        const showUpdaterMap = getShowUpdaterMap(firstFlushList)
-
         /// groupSetData 来优化多次setData
-
         const topWX = styleUpdater ? styleUpdater.inst : this.getWxInst()
         topWX.groupSetData(() => {
             for(let i = 0; i < flushList.length; i ++ ) {
                 const {inst, data} = flushList[i]
 
-                const updater = showUpdaterMap.get(inst)
-                if (updater) {
-                    Object.assign(data, updater.hiddenData)
-                }
-
-                if (i === 0) {
-                    inst.setData(data, () => {
-                        recursionFirstFlushWX(this, topWX, firstFlushList, Array.from(showUpdaterMap.values()), () => {
-                            recursionMountOrUpdate(this)
-                            cb && cb()
-                        })
-                    })
-                } else {
-                    inst.setData(data)
-                }
-            }
-        })
-    }
-
-    /**
-     * 刷新数据到小程序
-     * @param cb
-     * @param styleUpdater 上报样式的updater
-     */
-    updateWXSync(cb, styleUpdater) {
-        const flushList = []
-        const firstFlushList = []
-
-        this.updateWXInner(flushList, firstFlushList)
-
-        if (styleUpdater) {
-            flushList.push(styleUpdater)
-        }
-
-        if (flushList.length === 0) {
-            recursionMountOrUpdate(this)
-            cb && cb()
-            return
-        }
-
-        const showUpdaterMap = getShowUpdaterMap(firstFlushList)
-        const showUpdaterList = Array.from(showUpdaterMap.values())
-
-        /// groupSetData 来优化多次setData
-
-        const topWX = styleUpdater ? styleUpdater.inst : this.getWxInst()
-        topWX.groupSetData(() => {
-            for(let i = 0; i < flushList.length; i ++ ) {
-                const {inst, data} = flushList[i]
-
-                const updater = showUpdaterMap.get(inst)
-                if (updater) {
-                    Object.assign(data, updater.hiddenData)
-                }
-
-
-                if (showUpdaterList.length === 0) {
+                if (firstFlushList.length === 0) {
                     if (i === 0) {
                         inst.setData(data, () => {
                             recursionMountOrUpdate(this)
@@ -394,8 +243,9 @@ export class BaseComponent {
                 }
             }
 
-            if (showUpdaterList.length !== 0) {
-                recursionFirstFlushWXSync(this, topWX, firstFlushList, showUpdaterList, () => {
+            //flushList.setData 之后 已经可以获取子组件实例
+            if (firstFlushList.length !== 0) {
+                breadthRecursionFirstFlushWX(firstFlushList, () => {
                     recursionMountOrUpdate(this)
                     cb && cb()
                 })
@@ -617,7 +467,7 @@ export class Component extends BaseComponent {
         const oldOutStyle = this._myOutStyle
 
         if (this.isPageComp) {
-            this.updateWXSync(finalCb)
+            this.updateWX(finalCb)
             return
         }
 
@@ -649,7 +499,7 @@ export class Component extends BaseComponent {
 
                     const wxInst = pp.getWxInst()
 
-                    this.updateWXSync(finalCb, {
+                    this.updateWX(finalCb, {
                         inst: wxInst,
                         data: {
                             [stylePath]: newOutStyle
@@ -661,7 +511,7 @@ export class Component extends BaseComponent {
                 p = p._p
             }
         } else {
-            this.updateWXSync(finalCb)
+            this.updateWX(finalCb)
         }
     }
 }

diff --git a/packages/wx-react/miniprogram_dist/WxNormalComp.js b/packages/wx-react/miniprogram_dist/WxNormalComp.js
@@ -80,7 +80,7 @@ export default function (CompMySelf, RNApp) {
 
             const compInst = instanceManager.getCompInstByUUID(this.data.diuu)
             // 在firstUpdate 接受到小程序的回调之前，如果组件调用setState 可能会丢失！
-            compInst.firstUpdateWXSync()
+            compInst.firstUpdateWX()
         }
 
         o.methods.onShow = function () {