perf(wx-react-native): FlatList, SectionList, Picker R与_r 切换修改

areslabs · Jul 30, 2019 · 5570b90 · 5570b90
1 parent 42e8c14
commit 5570b90
Show file tree

Hide file tree

Showing 6 changed files with 183 additions and 172 deletions.
diff --git a/packages/wx-react-native/miniprogram_dist/component/WXFlatList/index.js b/packages/wx-react-native/miniprogram_dist/component/WXFlatList/index.js
@@ -13,7 +13,7 @@ const top = 80
 Component({
     properties: {
         diuu: null,
-        _r: null,
+        R: null,
     },
 
     attached() {
@@ -23,20 +23,17 @@ Component({
     ready() {
         instanceManager.setWxCompInst(this.data.diuu, this)
         const compInst = instanceManager.getCompInstByUUID(this.data.diuu)
-        if (!compInst.firstRender) {
-            compInst.firstUpdateUI()
-        }
         this.compInst = compInst
 
         const method = getPropsMethod(this, 'onRefresh');
-        this.hasOnRefreshPassed = !!this.data._r.onRefreshPassed
+        this.hasOnRefreshPassed = !!this.data.R.onRefreshPassed
         this.onRefreshMethod = method
 
         this.onScrollFunc = getPropsMethod(this, 'onScroll');
         this.onScrollEndDragFunc = getPropsMethod(this, 'onScrollEndDrag');
 
         this.hasChanges = []
-        const infos = this.data._r.stickyInfos
+        const infos = this.data.R.stickyInfos
         if (Array.isArray(infos) && infos.length > 0) {
             for (let k = 0; k < infos.length; k++) {
                 this.hasChanges.push(false)
@@ -84,7 +81,9 @@ Component({
                 clearTimeout(this.stopTimerFlag)
             }
             this.stopTimerFlag = setTimeout(() => {
-                if (this.lastVal <= 80 && !this.data._r.refreshing) {
+
+                const refreshing = (this.data._r || this.data.R).refreshing
+                if (this.lastVal <= 80 && !refreshing) {
                     this.setData({
                         sr: false
                     });
@@ -107,8 +106,9 @@ Component({
                 this.onScrollFunc(this.formatEvent(e));
             }
 
-            if (this.data._r.stickyInfos) {
-                const infos = this.data._r.stickyInfos
+            const stickyInfos = (this.data._r || this.data.R).stickyInfos
+            if (stickyInfos) {
+                const infos = stickyInfos
                 if (Array.isArray(infos) && infos.length > 0) {
                     for (let k = 0; k < infos.length; k++) {
                         const info = infos[k]
@@ -155,7 +155,8 @@ Component({
                 return;
             }
             //松手归位
-            if (this.lastVal <= top && this.lastVal >= 20 && !this.data._r.refreshing) {
+            const refreshing = (this.data._r || this.data.R).refreshing
+            if (this.lastVal <= top && this.lastVal >= 20 && !refreshing) {
                 this.setData({
                     sr: false
                 });

diff --git a/packages/wx-react-native/miniprogram_dist/component/WXFlatList/index.wxml b/packages/wx-react-native/miniprogram_dist/component/WXFlatList/index.wxml
@@ -14,82 +14,87 @@
         ArrayContains : ArrayContains,
     }
 </wxs>
-<scroll-view
-        bindscrolltoupper="onScrollToupper"
-        scroll-y
-        scroll-top="{{_r.onRefreshPassed ? (sr ? 0: 80) : 0}}"
-        upper-threshold="3"
-        scroll-with-animation="{{withAni}}"
-        bindscroll="outScroll"
-        scroll-left="{{outLeft}}"
-        style="flex: 1; flex-basis: 0%;overflow:hidden;"
-        bindtouchstart='startTouch'
-        bindtouchend='leaveTouch'
-        bindscrolltolower="onEndReached"
-        lower-threshold="{{100}}"
-        scroll-into-view="{{index_id}}"
->
-    <view style="{{_r.contentContainerStyle}}min-height: calc(100% + {{_r.onRefreshPassed ? 80 : 0}}px)">
-        <view
-                wx:if="{{_r.onRefreshPassed}}"
-                style="height:80px;align-items:center;justify-content:center;"
-        >
-            <image
-                    src="../../component/assets/loading.gif"
-                    mode="aspectFit"
-                    style="height: 30px"
-            />
-        </view>
 
+<template name="flatList">
+    <scroll-view
+            bindscrolltoupper="onScrollToupper"
+            scroll-y
+            scroll-top="{{onRefreshPassed ? (sr ? 0: 80) : 0}}"
+            upper-threshold="3"
+            scroll-with-animation="{{withAni}}"
+            bindscroll="outScroll"
+            scroll-left="{{outLeft}}"
+            style="flex: 1; flex-basis: 0%;overflow:hidden;"
+            bindtouchstart='startTouch'
+            bindtouchend='leaveTouch'
+            bindscrolltolower="onEndReached"
+            lower-threshold="{{100}}"
+            scroll-into-view="{{index_id}}"
+    >
+        <view style="{{contentContainerStyle}}min-height: calc(100% + {{onRefreshPassed ? 80 : 0}}px)">
+            <view
+                    wx:if="{{onRefreshPassed}}"
+                    style="height:80px;align-items:center;justify-content:center;"
+            >
+                <image
+                        src="../../component/assets/loading.gif"
+                        mode="aspectFit"
+                        style="height: 30px"
+                />
+            </view>
 
-        <ListHeaderComponentCPT
-                wx:if="{{_r.ListHeaderComponentDIUU}}"
-                diuu="{{_r.ListHeaderComponentDIUU}}"
-                _r="{{_r.ListHeaderComponentDIUUR}}"
-                style="{{tools.getFinalStyle(_r.ListHeaderComponentDIUUstyle)}}"
-        />
 
-        <ListEmptyComponentCPT
-                wx:if="{{_r.ListEmptyComponentDIUU}}"
-                diuu="{{_r.ListEmptyComponentDIUU}}"
-                _r="{{_r.ListEmptyComponentDIUUR}}"
-                style="{{tools.getFinalStyle(_r.ListEmptyComponentDIUUstyle)}}"
-        />
+            <ListHeaderComponentCPT
+                    wx:if="{{ListHeaderComponentDIUU}}"
+                    diuu="{{ListHeaderComponentDIUU}}"
+                    R="{{ListHeaderComponentDIUUR}}"
+                    style="{{tools.getFinalStyle(ListHeaderComponentDIUUstyle)}}"
+            />
 
+            <ListEmptyComponentCPT
+                    wx:if="{{ListEmptyComponentDIUU}}"
+                    diuu="{{ListEmptyComponentDIUU}}"
+                    R="{{ListEmptyComponentDIUUR}}"
+                    style="{{tools.getFinalStyle(ListEmptyComponentDIUUstyle)}}"
+            />
 
-        <block wx:if="{{_r.numColumns >= 2}}">
-            <view style="display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap">
-                <view wx:for="{{tools.compact(_r.renderItemData)}}" wx:key="key" style="width: {{100 / r.numColumns}}%">
-                    <renderItemCPT id="id_{{index}}"
-                                   diuu="{{item.renderItemDIUU}}"
-                                   _r="{{item.renderItemDIUUR}}"
-                                   style="{{tools.getFinalStyle(item.renderItemDIUUstyle)}};"/>
-                </view>
-            </view>
-        </block>
-        <block wx:else>
-            <block wx:for="{{tools.compact(_r.renderItemData)}}" wx:key="key">
-                <view wx:if="{{methods.ArrayContains(_r.stickyHeaderIndices,index)}}" style="{{sti['stickyContainerStyle'+index]}}">
-                    <renderItemCPT id="id_{{index}}"
-                                   diuu="{{item.renderItemDIUU}}"
-                                   _r="{{item.renderItemDIUUR}}"
-                                   style="{{tools.getFinalStyle(item.renderItemDIUUstyle)}}{{sti['stickyStyle'+index]}}"/>
+
+            <block wx:if="{{numColumns >= 2}}">
+                <view style="display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap">
+                    <view wx:for="{{tools.compact(renderItemData)}}" wx:key="key" style="width: {{100 / numColumns}}%">
+                        <renderItemCPT id="id_{{index}}"
+                                       diuu="{{item.renderItemDIUU}}"
+                                       R="{{item.renderItemDIUUR}}"
+                                       style="{{tools.getFinalStyle(item.renderItemDIUUstyle)}};"/>
+                    </view>
                 </view>
-                <renderItemCPT
-                    wx:else
-                    id="id_{{index}}"
-                    diuu="{{item.renderItemDIUU}}"
-                    _r="{{item.renderItemDIUUR}}"
-                    style="{{tools.getFinalStyle(item.renderItemDIUUstyle)}}"
-                />
             </block>
-        </block>
+            <block wx:else>
+                <block wx:for="{{tools.compact(renderItemData)}}" wx:key="key">
+                    <view wx:if="{{methods.ArrayContains(stickyHeaderIndices,index)}}" style="{{sti['stickyContainerStyle'+index]}}">
+                        <renderItemCPT id="id_{{index}}"
+                                       diuu="{{item.renderItemDIUU}}"
+                                       R="{{item.renderItemDIUUR}}"
+                                       style="{{tools.getFinalStyle(item.renderItemDIUUstyle)}}{{sti['stickyStyle'+index]}}"/>
+                    </view>
+                    <renderItemCPT
+                            wx:else
+                            id="id_{{index}}"
+                            diuu="{{item.renderItemDIUU}}"
+                            R="{{item.renderItemDIUUR}}"
+                            style="{{tools.getFinalStyle(item.renderItemDIUUstyle)}}"
+                    />
+                </block>
+            </block>
+
+            <ListFooterComponentCPT
+                    wx:if="{{ListFooterComponentDIUU}}"
+                    diuu="{{ListFooterComponentDIUU}}"
+                    R="{{ListFooterComponentDIUUR}}"
+                    style="{{tools.getFinalStyle(ListFooterComponentDIUUstyle)}}"
+            />
+        </view>
+    </scroll-view>
+</template>
 
-        <ListFooterComponentCPT
-                wx:if="{{_r.ListFooterComponentDIUU}}"
-                diuu="{{_r.ListFooterComponentDIUU}}"
-                _r="{{_r.ListFooterComponentDIUUR}}"
-                style="{{tools.getFinalStyle(_r.ListFooterComponentDIUUstyle)}}"
-        />
-    </view>
-</scroll-view>
+<template is="flatList" data="{{...(_r || R)}}"/>
diff --git a/packages/wx-react-native/miniprogram_dist/component/WXPicker/index.js b/packages/wx-react-native/miniprogram_dist/component/WXPicker/index.js
@@ -15,20 +15,13 @@ Component({
         },
         onValueChange: null,
         diuu: null,
-        _r: null
+        R: null
     },
 
     attached() {
         instanceManager.setWxCompInst(this.data.diuu, this)
     },
 
-    ready() {
-        instanceManager.setWxCompInst(this.data.diuu, this)
-        const compInst = instanceManager.getCompInstByUUID(this.data.diuu)
-        if (!compInst.firstRender) {
-            compInst.firstUpdateUI()
-        }
-    },
 
     detached() {
         instanceManager.removeUUID(this.data.diuu)
@@ -37,7 +30,9 @@ Component({
     methods: {
         onValueChange: function (e) {
             const index = e.detail.value[0];
-            const value = this.data._r.pickData[index].value
+
+            const pickData = (this.data._r || this.data.R).pickData
+            const value = pickData[index].value
 
             const method = getPropsMethod(this, 'onValueChange')
             method && method(value, index)

diff --git a/packages/wx-react-native/miniprogram_dist/component/WXPicker/index.wxml b/packages/wx-react-native/miniprogram_dist/component/WXPicker/index.wxml
@@ -1,19 +1,24 @@
 <wxs src="../../../../../commonwxs.wxs" module="tools" />
-<picker-view
-        indicator-style="height: 50px"
-        style="position: absolute; height: {{_r.itemLength * 50}}px; width: 100%"
-        value="{{_r.seleIndex}}"
-        bindchange="onValueChange">
-    <picker-view-column>
-        <block
-                wx:for="{{tools.compact(_r.childrenData)}}"
-                wx:key="key"
-        >
-            <childrenCPT
-                    diuu="{{item.childrenDIUU}}"
-                    _r="{{item.childrenDIUUR}}"
-                    style="{{tools.getFinalStyle(item.childrenDIUUstyle)}}; line-height: 50px;"
-            />
-        </block>
-    </picker-view-column>
-</picker-view>
+
+<template name="picker">
+    <picker-view
+            indicator-style="height: 50px"
+            style="position: absolute; height: {{itemLength * 50}}px; width: 100%"
+            value="{{seleIndex}}"
+            bindchange="onValueChange">
+        <picker-view-column>
+            <block
+                    wx:for="{{tools.compact(childrenData)}}"
+                    wx:key="key"
+            >
+                <childrenCPT
+                        diuu="{{item.childrenDIUU}}"
+                        R="{{item.childrenDIUUR}}"
+                        style="{{tools.getFinalStyle(item.childrenDIUUstyle)}}; line-height: 50px;"
+                />
+            </block>
+        </picker-view-column>
+    </picker-view>
+</template>
+
+<template is="picker" data="{{...(_r || R)}}"/>
diff --git a/packages/wx-react-native/miniprogram_dist/component/WXSectionList/index.js b/packages/wx-react-native/miniprogram_dist/component/WXSectionList/index.js
@@ -12,7 +12,7 @@ const top = 80
 Component({
     properties: {
         diuu: null,
-        _r: null
+        R: null
     },
 
     attached() {
@@ -22,13 +22,10 @@ Component({
     ready() {
         instanceManager.setWxCompInst(this.data.diuu, this)
         const compInst = instanceManager.getCompInstByUUID(this.data.diuu)
-        if (!compInst.firstRender) {
-            compInst.firstUpdateUI()
-        }
         this.compInst = compInst
 
         const method = getPropsMethod(this, "onRefresh");
-        this.hasOnRefreshPassed = !!this.data._r.onRefreshPassed
+        this.hasOnRefreshPassed = !!this.data.R.onRefreshPassed
         this.onRefreshMethod = method
 
         this.onScrollFunc = getPropsMethod(this, 'onScroll');
@@ -66,7 +63,8 @@ Component({
                 clearTimeout(this.stopTimerFlag)
             }
             this.stopTimerFlag = setTimeout(() => {
-                if (this.lastVal <= 80 && !this.data._r.refreshing) {
+                const refreshing = (this.data._r || this.data.R).refreshing
+                if (this.lastVal <= 80 && !refreshing) {
                     this.setData({
                         sr: false
                     });
@@ -114,7 +112,9 @@ Component({
                 return;
             }
             //松手归位
-            if (this.lastVal <= top && this.lastVal >= 20 && !this.data._r.refreshing) {
+
+            const refreshing = (this.data._r || this.data.R).refreshing
+            if (this.lastVal <= top && this.lastVal >= 20 && !refreshing) {
                 this.setData({
                     sr: false
                 });