Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Taro 3 百度小程序每次 setData 都会导致页面全量重新渲染,导致图片闪烁、输入框无法正常使用等问题 #7293

Closed
fjc0k opened this issue Aug 9, 2020 · 25 comments · Fixed by #8660
Assignees
Labels
F-react Framework - React P-0 Critical, patch T-swan Target - 编译到百度小程序 V-3 Version - 3.x
Milestone

Comments

@fjc0k
Copy link
Contributor

fjc0k commented Aug 9, 2020

相关平台

百度小程序

复现仓库

https://github.com/fjc0k/taro3-baidu-bug.git
小程序基础库: 3.19
使用框架: React

复现步骤

  • git clone https://github.com/fjc0k/taro3-baidu-bug.git
  • npm i
  • npm run dev:swan
  • 用百度小程序开发者工具导入目录 taro3-baidu-bug
  • 在输入框里输入任意值
  • 此时会发现,输入框里每次只能输入一个字符,即输入一个字符后就失去焦点了,并且每次输入后图片都会闪烁一下
    (这里有一个 Gif 图演示,由于帧数问题,不能表现出图片闪烁问题,但能看到每次输入后输入框的焦点都会失去,即发生了页面全量重新渲染)

期望结果

输入框可以连续输入字符,图片不会闪烁

实际结果

输入框只能每次输入一个字符,图片闪烁

环境信息

```bash
Taro CLI 3.0.7 environment info:
    System:
      OS: macOS 10.15
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 12.18.3 - /var/folders/l7/rmfdyg291wzb0l8x09ww32g00000gn/T/yarn--1596978218331-0.741200130041614/node
      Yarn: 1.22.4 - /var/folders/l7/rmfdyg291wzb0l8x09ww32g00000gn/T/yarn--1596978218331-0.741200130041614/yarn
      npm: 6.14.6 - ~/.nvm/versions/node/v12.18.3/bin/npm
    npmPackages:
      @tarojs/cli: ^3.0.7 => 3.0.7 
      @tarojs/components: ^3.0.7 => 3.0.7 
      @tarojs/mini-runner: ^3.0.7 => 3.0.7 
      @tarojs/react: ^3.0.7 => 3.0.7 
      @tarojs/runtime: ^3.0.7 => 3.0.7 
      @tarojs/taro: ^3.0.7 => 3.0.7 
      @tarojs/webpack-runner: ^3.0.7 => 3.0.7 
      babel-preset-taro: ^3.0.7 => 3.0.7 
      react: ^16.10.0 => 16.13.1 

补充信息

百度小程序社区也有相关帖子,但估计得 Taro 这边解决:

@taro-bot2 taro-bot2 bot added F-react Framework - React T-swan Target - 编译到百度小程序 V-3 Version - 3.x labels Aug 9, 2020
@rvean
Copy link

rvean commented Aug 10, 2020

我也遇到这样的问题,每次 setState 都会全量渲染,页面会闪烁并重新加载,版本 3.0.5 升级到 3.0.7都是一样

@Chen-jj Chen-jj added the P-0 Critical, patch label Aug 20, 2020
@taro-bot2 taro-bot2 bot added this to the 3.0.8 milestone Aug 20, 2020
@Chen-jj Chen-jj modified the milestones: 3.0.8, 3.0.9 Aug 20, 2020
@zhangchao828
Copy link

+1

@Lomu
Copy link

Lomu commented Aug 28, 2020

坐等修复

@Chen-jj Chen-jj self-assigned this Aug 28, 2020
@Chen-jj
Copy link
Contributor

Chen-jj commented Aug 31, 2020

#7254

@Chen-jj Chen-jj removed this from the 3.0.9 milestone Aug 31, 2020
@Chen-jj
Copy link
Contributor

Chen-jj commented Aug 31, 2020

我用原生写法模拟 Taro 3 的渲染机制复现了问题,回复在百度论坛的帖子上了:https://smartprogram.baidu.com/forum/topic/show/115463

Taro 3 使用 <template /> 拼接进行渲染,触发了百度的渲染逻辑问题(他们的设定,也不能说是 bug。。)

正在与百度方面沟通解决,应该只能等他们修复,着急开发的朋友只能先选用 Taro 1 / 2 了。

image

@Chen-jj
Copy link
Contributor

Chen-jj commented Aug 31, 2020

原生 demo:

swan-demo.zip

@zhangchao828
Copy link

可以先用useRef解决,input不受控,值存到ref中

@raymond-cat
Copy link

+1

1 similar comment
@oyvfhp
Copy link

oyvfhp commented Oct 20, 2020

+1

@oyvfhp
Copy link

oyvfhp commented Oct 20, 2020

这么久了,这个还没修复吗?

@Yaolin-BeRich
Copy link

我也遇到一样的问题 版本3.0.13

@LiZheGuang
Copy link

+1相同的情况

@yahoo2651
Copy link

您好,请问下 @Chen-jj 有进展吗?

@kuan1
Copy link

kuan1 commented Dec 21, 2020

关注 +1

@j78742
Copy link

j78742 commented Dec 23, 2020

关注+1,这个问题太影响体验了,目前没办法开发了

@zhangchao828
Copy link

@kuan1 @j78742 在没解决之前,只能用Taro2开发了,而且看下来是要等百度那边的人解决,但是等百度不知道猴年马月

@j78742
Copy link

j78742 commented Dec 24, 2020

@kuan1 @j78742 在没解决之前,只能用Taro2开发了,而且看下来是要等百度那边的人解决,但是等百度不知道猴年马月

唉,我们是全量Taro3开发了,微信和h5都弄好了,现在要支持百度小程序,很难降级了

@JackyLeeCS
Copy link

百度小程序开发体验太糟糕了

@laoono
Copy link

laoono commented Jan 28, 2021

·

百度小程序开发体验太糟糕了

降级Taro2吧

@jiangjiu
Copy link

jiangjiu commented Feb 1, 2021

@Chen-jj @rvean @j78742 我看了这个原生写法的swan-demo,确实复现了,但是数据root.cn是个对象,看样子是在s-for遍历对象来监听数据变化,遍历对象这个做法是有问题的吧,object并不是有序的,taro是不是可以改成array的实现?

@jiangjiu
Copy link

jiangjiu commented Feb 1, 2021

root.cn修改成array类型,上面的demo两个问题都解决了

@Chen-jj
Copy link
Contributor

Chen-jj commented Feb 1, 2021

@jiangjiu 十分感谢,我们看看的,尽快修复

@Chen-jj Chen-jj added this to the 3.0.27 milestone Feb 2, 2021
@I-Want-ToBelieve
Copy link
Contributor

@jiangjiu 十分感谢,我们看看的,尽快修复

行的通吗 能发新版本了吗

@Chen-jj
Copy link
Contributor

Chen-jj commented Feb 6, 2021

@doublethinkio 着急的话可以按照上述 commit 修改本地 node_modules 的对应文件

@jiangjiu
Copy link

jiangjiu commented Feb 7, 2021

@jiangjiu 十分感谢,我们看看的,尽快修复

另外还想提个建议,源码里的注释实在是太少了。。。
尤其是架构复杂、源代码居多的项目,作者写的时候很清楚,过段时间再看茫茫多的代码,可能自己也懵了

更不要说希望开源社区一起帮忙贡献代码,注释量不够 不清晰,只有通读整体架构以后,才有个概念
可能还需要再过一遍茫茫多的commit和fix,看看整体演变过程中又是怎么解决某些case的
这才能有机会贡献核心代码

所以希望taro的同学可以尽可能多写点注释哈,也许就能多吸引开源社区一起提交了💪

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
F-react Framework - React P-0 Critical, patch T-swan Target - 编译到百度小程序 V-3 Version - 3.x
Projects
None yet
Development

Successfully merging a pull request may close this issue.