scrollview滚动卡顿

[WirelessSprucetec]

相关平台

微信小程序

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

复现步骤

scrollView组件滚动的时候，如果页面上还有别的地方在setState（比如页面上有一个定时器在每隔1s去setState并更新到页面上），滚动就会出现卡顿的现象。好像不只是在scrollView组件，页面级滚动也会卡顿。。。我快绝望了，taro2没事的，升级taro3之后就这样了，官方大大快看看吧，我们马上要上线了，要哭了-。-

期望结果

滚动过程中有别的地方在setState并显示到页面的时候，滚动不卡顿

实际结果

滚动过程中有别的地方在setState并显示到页面的时候，滚动会卡顿

环境信息

👽 Taro v2.1.1

  Taro CLI 2.1.1 environment info:
    System:
      OS: macOS 10.15.4
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 10.16.2 - ~/.nvm/versions/node/v10.16.2/bin/node
      Yarn: 1.22.4 - /usr/local/bin/yarn
      npm: 6.9.0 - ~/.nvm/versions/node/v10.16.2/bin/npm
    npmPackages:
      @tarojs/cli: 3.0.13 => 3.0.13
      @tarojs/components: 3.0.13 => 3.0.13
      @tarojs/mini-runner: 3.0.13 => 3.0.13
      @tarojs/taro: 3.0.13 => 3.0.13
      @tarojs/webpack-runner: 3.0.13 => 3.0.13
      eslint-config-taro: 3.0.13 => 3.0.13
      react: ^16.10.0 => 16.13.1

[Chen-jj]

@WirelessSprucetec 有没有 demo 看看

[WirelessSprucetec]

@WirelessSprucetec 有没有 demo 看看

简单写了个demo在安卓机测了下是不卡的。但是我这个场景是一个长列表，然后里面循环了我的商品组件（一个个自定义组件），就会有这种卡顿的情况。具体原因正在排查，想问一下现在有哪些大型应用已经是在使用taro3了吗，我想拿安卓机去体验一下，试试看别的taro3项目卡不卡

[gjc9620]

你可以吧那个需要实时更新的地方抽一个组件 在内部setState 这样只有那个组建会更新 页面不会更新了 应该可以解决你的问题

[ruidoc]

同样感受，taro3一次性渲染内容大一点的时候，就会严重卡顿，尤其scrollView。可能因此官方才出了virtualList。另一方面这也是个好事，卡顿就证明你的代码还有优化空间。不过virtualList也只能支持固定高度的虚拟列表，不知什么时候能支持自定义高度。