From d99829d28d8841bc12811e109fe1d39d07d0f494 Mon Sep 17 00:00:00 2001
From: rex <rexkaneki@gmail.com>
Date: Tue, 26 Mar 2019 00:09:05 +0800
Subject: [PATCH] [improvement] Tabbar: improve performance

fix #1429
---
 packages/tabbar-item/index.ts   | 15 ++++++----
 packages/tabbar-item/index.wxml |  6 ++--
 packages/tabbar/README.md       |  7 -----
 packages/tabbar/index.ts        | 49 +++++++++++++++++----------------
 4 files changed, 38 insertions(+), 39 deletions(-)

diff --git a/packages/tabbar-item/index.ts b/packages/tabbar-item/index.ts
index aaebf2e3..521fae35 100644
--- a/packages/tabbar-item/index.ts
+++ b/packages/tabbar-item/index.ts
@@ -9,7 +9,10 @@ VantComponent({
 
   relation: {
     name: 'tabbar',
-    type: 'ancestor'
+    type: 'ancestor',
+    linked(target: Weapp.Component) {
+      this.parent = target;
+    }
   },
 
   data: {
@@ -18,17 +21,17 @@ VantComponent({
 
   methods: {
     onClick() {
-      const parent = this.getRelationNodes('../tabbar/index')[0];
-      if (parent) {
-        parent.onChange(this);
+      if (this.parent) {
+        this.parent.onChange(this);
       }
       this.$emit('click');
     },
 
-    setActive({ active, color }) {
+    setActive({ active, color }): Promise<void> {
       if (this.data.active !== active) {
-        this.set({ active, color });
+        return this.set({ active, color });
       }
+      return Promise.resolve();
     }
   }
 });
diff --git a/packages/tabbar-item/index.wxml b/packages/tabbar-item/index.wxml
index 43378e94..58940604 100644
--- a/packages/tabbar-item/index.wxml
+++ b/packages/tabbar-item/index.wxml
@@ -1,9 +1,11 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view
-  class="van-tabbar-item custom-class {{ active ? 'van-tabbar-item--active' : '' }}"
+  class="{{ utils.bem('tabbar-item', { active }) }} custom-class"
   style="{{ active && color ? 'color: ' + color : '' }}"
   bind:tap="onClick"
 >
-  <view class="van-tabbar-item__icon {{ dot ? 'van-tabbar-item__icon--dot' : '' }}">
+  <view class="{{ utils.bem('tabbar-item__icon', { dot }) }}">
     <van-icon
       wx:if="{{ icon }}"
       name="{{ icon }}"
diff --git a/packages/tabbar/README.md b/packages/tabbar/README.md
index ba844e28..98e3c4fa 100644
--- a/packages/tabbar/README.md
+++ b/packages/tabbar/README.md
@@ -131,10 +131,3 @@ Page({
 |-----------|-----------|
 | icon | 未选中时的图标 |
 | icon-active | 选中时的图标 |
-
-### 更新日志
-
-| 版本 | 类型 | 内容 |
-|-----------|-----------|-----------|
-| 0.1.1 | feature | 新增组件 |
-| 0.2.1 | bugfix | 修复 z-index 不生效的问题 |
diff --git a/packages/tabbar/index.ts b/packages/tabbar/index.ts
index a5b6a35e..cd95dae1 100644
--- a/packages/tabbar/index.ts
+++ b/packages/tabbar/index.ts
@@ -8,16 +8,14 @@ VantComponent({
     name: 'tabbar-item',
     type: 'descendant',
     linked(target: Weapp.Component) {
-      this.data.items.push(target);
-      setTimeout(() => {
-        this.setActiveItem();
-      });
+      this.children = this.children || [];
+      this.children.push(target);
+      this.setActiveItem();
     },
     unlinked(target: Weapp.Component) {
-      this.data.items = this.data.items.filter(item => item !== target);
-      setTimeout(() => {
-        this.setActiveItem();
-      });
+      this.children = this.children || [];
+      this.children = this.children.filter(item => item !== target);
+      this.setActiveItem();
     }
   },
 
@@ -34,12 +32,8 @@ VantComponent({
     }
   },
 
-  data: {
-    items: []
-  },
-
   watch: {
-    active(active) {
+    active(active: number) {
       this.currentActive = active;
       this.setActiveItem();
     }
@@ -50,21 +44,28 @@ VantComponent({
   },
 
   methods: {
-    setActiveItem() {
-      this.data.items.forEach((item, index) => {
-        item.setActive({
-          active: index === this.currentActive,
-          color: this.data.activeColor
-        });
-      });
+    setActiveItem(): Promise<any> {
+      if (!Array.isArray(this.children) || !this.children.length) {
+        return Promise.resolve();
+      }
+      return Promise.all(
+        this.children.map((item: Weapp.Component, index: number) =>
+          item.setActive({
+            active: index === this.currentActive,
+            color: this.data.activeColor
+          })
+        )
+      );
     },
 
-    onChange(child) {
-      const active = this.data.items.indexOf(child);
+    onChange(child: Weapp.Component) {
+      const active = (this.children || []).indexOf(child);
+
       if (active !== this.currentActive && active !== -1) {
-        this.$emit('change', active);
         this.currentActive = active;
-        this.setActiveItem();
+        this.setActiveItem().then(() => {
+          this.$emit('change', active);
+        });
       }
     }
   }