From 68d47fe16ab7ae045c515245b5ade8e14141ea32 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Wed, 23 Sep 2020 18:00:26 +0800
Subject: [PATCH] perf(Tab): skip rendering empty pane (#7238)

---
 src/tab/index.js                              | 10 ++++++++--
 src/tab/test/__snapshots__/index.spec.js.snap | 16 ++++++++++++++++
 src/tab/test/index.spec.js                    | 13 +++++++++++++
 3 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/src/tab/index.js b/src/tab/index.js
index 892f798c2..9a3e40dd5 100644
--- a/src/tab/index.js
+++ b/src/tab/index.js
@@ -55,9 +55,15 @@ export default createComponent({
 
   render(h) {
     const { slots, parent, isActive } = this;
-    const shouldRender = this.inited || parent.scrollspy || !parent.lazyRender;
+    const slotContent = slots();
+
+    if (!slotContent) {
+      return;
+    }
+
     const show = parent.scrollspy || isActive;
-    const Content = shouldRender ? slots() : h();
+    const shouldRender = this.inited || parent.scrollspy || !parent.lazyRender;
+    const Content = shouldRender ? slotContent : h();
 
     if (parent.animated) {
       return (
diff --git a/src/tab/test/__snapshots__/index.spec.js.snap b/src/tab/test/__snapshots__/index.spec.js.snap
index 93627890c..0377c7d10 100644
--- a/src/tab/test/__snapshots__/index.spec.js.snap
+++ b/src/tab/test/__snapshots__/index.spec.js.snap
@@ -202,6 +202,22 @@ exports[`name prop 1`] = `
 </div>
 `;
 
+exports[`render empty tab 1`] = `
+<div class="van-tabs van-tabs--line">
+  <div class="van-tabs__wrap">
+    <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
+      <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
+      <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
+      <div class="van-tabs__line"></div>
+    </div>
+  </div>
+  <div class="van-tabs__content">
+    <!---->
+    <!---->
+  </div>
+</div>
+`;
+
 exports[`render nav-left & nav-right slot 1`] = `
 <div class="van-tabs van-tabs--line">
   <div>
diff --git a/src/tab/test/index.spec.js b/src/tab/test/index.spec.js
index 9eb51fba5..7e8e21054 100644
--- a/src/tab/test/index.spec.js
+++ b/src/tab/test/index.spec.js
@@ -410,3 +410,16 @@ test('before-change prop', async () => {
   expect(onChange).toHaveBeenCalledTimes(2);
   expect(onChange).toHaveBeenLastCalledWith(4, 'title5');
 });
+
+test('render empty tab', async () => {
+  const wrapper = mount({
+    template: `
+      <van-tabs>
+        <van-tab title="title1" />
+        <van-tab title="title2" />
+      </van-tabs>
+    `,
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});