taro编译成快手相关问题

[Hehejie1]

相关平台

快手小程序

使用框架: React

复现步骤

https://bytedance.feishu.cn/docs/doccn2jDLH4tEQgU3h1kCujKuTg?from=from_copylink

期望结果

编译正确

实际结果

编译错误

环境信息

Taro CLI 3.3.2 environment info:
    System:
      OS: macOS 10.15.7
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 16.8.0 - /usr/local/bin/node
      Yarn: 1.22.11 - /usr/local/bin/yarn
      npm: 7.21.0 - /usr/local/bin/npm
    npmPackages:
      @tarojs/components: 3.3.10 => 3.3.10 
      @tarojs/mini-runner: 3.3.10 => 3.3.10 
      @tarojs/react: 3.3.10 => 3.3.10 
      @tarojs/runtime: 3.3.10 => 3.3.10 
      @tarojs/taro: 3.3.10 => 3.3.10 
      @tarojs/webpack-runner: 3.3.10 => 3.3.10 
      babel-preset-taro: 3.3.10 => 3.3.10 
      react: ^17.0.2 => 17.0.2 
    npmGlobalPackages:
      typescript: 4.0.2

[Chen-jj]

@Hehejie1 能提供一下 demo 么？

[Hehejie1]

抱歉，那个第一个元素被删除的demo拆分出来还没有复现。 你可以试一下切换tab时候第二个无法展示。  Taro v3.3.12   Taro CLI 3.3.12 environment info:     System:       OS: macOS 10.15.7       Shell: 5.7.1 - /bin/zsh     Binaries:       Node: 16.8.0 - /usr/local/bin/node       Yarn: 1.22.11 - /usr/local/bin/yarn       npm: 7.21.0 - /usr/local/bin/npm     npmPackages:       @tarojs/components: 3.3.12 => 3.3.12        @tarojs/mini-runner: 3.3.12 => 3.3.12        @tarojs/react: 3.3.12 => 3.3.12        @tarojs/runtime: 3.3.12 => 3.3.12        @tarojs/taro: 3.3.12 => 3.3.12        @tarojs/webpack-runner: 3.3.12 => 3.3.12        babel-preset-taro: 3.3.12 => 3.3.12        eslint-config-taro: 3.3.12 => 3.3.12        react: ^17.0.0 => 17.0.2      npmGlobalPackages:       typescript: 4.0.2 第一个元素被删除的这个这种格式的，但是这个列表并不是全部都是删除的，而是只有前面删除了 之后复现出来再发给你

…

------------------ 原始邮件 ------------------ 发件人: "NervJS/taro" ***@***.***>; 发送时间: 2021年11月9日(星期二) 下午2:19 ***@***.***>; ***@***.******@***.***>; 主题: Re: [NervJS/taro] taro编译成快手相关问题 (Issue #10557) @Hehejie1 能提供一下 demo 么？ — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android.

[Hehejie1]

你好，这个问题已经复现了，麻烦你帮忙看一下

…

------------------ 原始邮件 ------------------ 发件人: "NervJS/taro" ***@***.***>; 发送时间: 2021年11月9日(星期二) 下午2:19 ***@***.***>; ***@***.******@***.***>; 主题: Re: [NervJS/taro] taro编译成快手相关问题 (Issue #10557) @Hehejie1 能提供一下 demo 么？ — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android.

[Hehejie1]

子元素消失.zip

[Chen-jj]

template diff 的时候，template 的 is 没有变更 。给快手提了一下：

https://developers.kuaishou.com/topic?bizType=miniprogram&tid=2846

和 NervJS/taro-plugin-platform-kwai#1 (comment) 是同一个问题。

---

这种写法：

<View className='content'>
  {[1].includes(tab) && <TestOne />}
  {[2].includes(tab) && <TestTwo tab={tab} user={user} />}
</View>

在更新的时候会 diff <TestOne> 和 <TestTwo>。对比 DOM 树结构可知，一开始是文本节点对应 <template name="#text">，更新后应该是 View 组件节点对应 <template name="static-view">：

然而快手目前 template 的 is 不会变更，也就是说该 View 组件还是使用了文本节点的 template ：<template name="#text">。所以就不显示了。

官方回复：问题根源在template的is暂时不支持变更。这部分的支持影响面比较大，最近暂时上不了，最快需要等一月中上线

---

目前只能绕过。

有很多办法，例如让更新时不要进行 diff，完全生成新的 DOM 子树：

// 例如把两个把它们分在两颗子树里
<View className='content'>
  <View>{[1].includes(tab) && <TestOne />}</View>
  <View>{[2].includes(tab) && <TestTwo tab={tab} user={user} />}</View>
</View>
// 又例如让 nodeType 不一样，diff 失效，直接重建子树
<View className='content'>
  {[1].includes(tab) && <TestOne />}
  {[2].includes(tab) && <Block><TestTwo tab={tab} user={user} /></Block>}
</View>