customWrapper 在支付宝小程序端执行表现异常

[guoenyue]

相关平台

支付宝小程序

小程序基础库: 2.7.24
使用框架: React

复现步骤

如题，支付宝小程序不支持template中使用自定义组件，但是taro官方文档里写了customWrapper支持支付宝端，实际运行下来，在支付宝小程序端不能正确运行，表现为状态组件无法更新甚至无法渲染

支付宝相关文档

当前问题：
支付宝小程序执行customWrapper异常，包裹组件无法渲染，即自定义组件数据没有更新

期望结果

希望支付宝端可以有正常减少更新层级的方法

实际结果

支付宝小程序执行customWrapper异常，包裹组件无法渲染，即自定义组件数据没有更新

环境信息

Taro CLI 3.2.7 environment info:
System:
OS: macOS 10.15.7
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 12.10.0 - /usr/local/bin/node
npm: 6.10.3 - /usr/local/bin/npm
npmPackages:
@tarojs/cli: ^3.3.19 => 3.3.19
@tarojs/components: 3.3.19 => 3.3.19
@tarojs/mini-runner: 3.3.19 => 3.3.19
@tarojs/react: 3.3.19 => 3.3.19
@tarojs/runtime: 3.3.19 => 3.3.19
@tarojs/taro: 3.3.19 => 3.3.19
@tarojs/webpack-runner: 3.3.19 => 3.3.19
babel-preset-taro: 3.3.19 => 3.3.19
eslint-config-taro: 3.3.19 => 3.3.19
react: ^17.0.0 => 17.0.2

---

补充信息

taro官方文档针对customWrapper的讲解过于简单，从demo中无法看出使用了customWrapper降低了更新层级，因为本身包裹的就是一个无状态原始组件，希望提供复杂场景

[Barrierml]

能提供一个复现的demo嘛

[guoenyue]

以下代码page中把CustomWrapper注释放开后在支付宝渲染就不正常了，只会展示无状态数据（初始state），后续的state变更customwrapper无法响应

// Clock 
import React, { PureComponent } from 'react';
import { CustomWrapper, View } from '@tarojs/components';

export const formatNumber = n => (`${n}`[1] ? `${n}` : `0${n}`);
export const formatTime = date => {
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const hour = date.getHours();
  const minute = date.getMinutes();
  const second = date.getSeconds();

  return `${[year, month, day].map(formatNumber).join('-')} ${[hour, minute, second]
    .map(formatNumber)
    .join(':')}`;
};

export default class ClockDemo extends PureComponent<any, any> {
  public timerRef: number;
  constructor(props) {
    super(props);

    this.state = {
      time: formatTime(new Date()),
    };

    this.timerRef = this.createTimer(this.updateTime);
  }

  createTimer = (fn, timeout = 1000) => {
    return (setInterval(fn, timeout) as unknown) as number;
  };

  updateTime = () => {
    this.setState({
      time: formatTime(new Date()),
    });
  };

  componentWillUnmount() {
    clearInterval(this.timerRef);
  }

  render() {
    const { time } = this.state;
    return (
        <View>时间为：{time}</View>
    );
  }
}


// page
import React, { PureComponent } from 'react';
import { View ,CustomWrapper} from '@tarojs/components';
import ClockDemo from './clock';

class DemoPage extends PureComponent<any,any> {

  render() {
    return (
      <View>
        <View onClick={this.handleClick}>点击展示confirm</View>
        {/* <CustomWrapper> */}
          <ClockDemo />
        {/* </CustomWrapper> */}
      </View>
    );
  }
export default DemoPage;

以上demo在微信小程序环境中正常执行（可以看到clock的实时变化），支付宝系异常，因为我们业务也使用了阿里系的mpaas，也是异常的
小程序有关文档中也提到说setData的作用范围
支付宝文档：https://opendocs.alipay.com/mini/introduce/PerformanceSolution#%E4%BC%98%E5%8C%96%20setData%20%E9%80%BB%E8%BE%91
微信文档：https://developers.weixin.qq.com/miniprogram/dev/framework/performance/tips/runtime_setData.html#_3-3-%E9%80%89%E6%8B%A9%E5%90%88%E9%80%82%E7%9A%84-setData-%E8%8C%83%E5%9B%B4

@Barrierml

[guoenyue]

似乎是支付宝系环境下被customwrapper包裹的元素的setData没有被劫持到customWrapper组件内部设置

[Barrierml]

似乎是支付宝系环境下被customwrapper包裹的元素的setData没有被劫持到customWrapper组件内部设置

使用 @tarojs/cli@3.2 创建的 Taro React 应用确实复现了所说的问题
不过升级到 @tarojs/cli@3.4 就正常了，考虑升级下Taro版本吧，推荐先升级3.4的稳定版本

[Chen-jj]

@guoenyue 感谢反馈~ 也感谢 @Barrierml 帮忙跟踪~

定位了一下，支付宝 CustomWrapper 目前的确没有生效。原因是支付宝中自定义组件的生命周期命名与微信小程序标准不一致。对应微信小程序自定义组件 attached 和 detached 生命周期的，在支付宝中分别是 didMount 和 didUnmount。这问题将在下一个版本修复。

而 Taro 最新版本当 CustomWrapper 失效时能回退到使用页面级别的 setData，不会影响页面更新渲染，所以可以先升级解决。

[Chen-jj]

taro官方文档针对customWrapper的讲解过于简单，从demo中无法看出使用了customWrapper降低了更新层级，因为本身包裹的就是一个无状态原始组件，希望提供复杂场景

关于这点，可以这样观察 setData 的数据：

import Taro from '@tarojs/taro'

Taro.options.debug = true

[Chen-jj]

备注：支付宝小程序必须开启【小程序基础库 2.0 构建】才支持使用 CustomWrapper

[guoenyue]

taro官方文档针对customWrapper的讲解过于简单，从demo中无法看出使用了customWrapper降低了更新层级，因为本身包裹的就是一个无状态原始组件，希望提供复杂场景

关于这点，可以这样观察 setData 的数据：

import Taro from '@tarojs/taro'

Taro.options.debug = true

好的，因为我们最近正在解决性能问题，所以比较关注这里，我们接下来会积极尝试升级来解决目前遇到的问题

[wq0613]

备注：支付宝小程序必须开启【小程序基础库 2.0 构建】才支持使用 CustomWrapper

@Chen-jj
请问必须开启基础库2.0得原因是什么？如果我需要在2.0以下版本使用CustomWrapper 该怎么做

目前效果是，初次渲染正常，但是组件数据更新后会消失