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 h5 部分更新后 渲染先后顺序出错 #10386

Closed
wc1996 opened this issue Oct 8, 2021 · 3 comments
Closed

Taro h5 部分更新后 渲染先后顺序出错 #10386

wc1996 opened this issue Oct 8, 2021 · 3 comments
Labels
duplicate This issue or pull request already exists F-react Framework - React T-h5 Target - 编译到 H5 V-3 Version - 3.x

Comments

@wc1996
Copy link

wc1996 commented Oct 8, 2021

相关平台

H5

浏览器版本: Chrome 62
使用框架: React

复现步骤

页面初始化三个View 的 顺序为:1、id 为common 的view 2、class 为 pro-left 的view 3、class 为 cont-pro 的view ;
在 局部更新了 2、3模块之后,页面渲染顺序为 2、3、1,先渲染了 更新的模块,再渲染未更新模块,需要给第一个模块加上key 进行强制更新才能保证渲染顺序与初始化顺序一致。
初始化渲染顺序:
image
局部模块更新后渲染顺序:
image

期望结果

局部更新的渲染顺序与 初始化渲染顺序不一致。

实际结果

局部更新的渲染顺序与 初始化渲染顺序保持一致。

环境信息

 Taro CLI 3.2.8 environment info:
    System:
      OS: macOS 10.15.4
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 15.14.0 - ~/.nvm/versions/node/v15.14.0/bin/node
      Yarn: 1.22.4 - /usr/local/bin/yarn
      npm: 7.7.6 - ~/.nvm/versions/node/v15.14.0/bin/npm
    npmPackages:
      @tarojs/cli: ^3.2.1 => 3.2.8 
      @tarojs/components: 3.1.4 => 3.1.4 
      @tarojs/mini-runner: 3.1.4 => 3.1.4 
      @tarojs/react: 3.1.4 => 3.1.4 
      @tarojs/runtime: 3.1.4 => 3.1.4 
      @tarojs/taro: 3.1.4 => 3.1.4 
      @tarojs/webpack-runner: 3.1.4 => 3.1.4 
      babel-preset-taro: 3.1.4 => 3.1.4 
      eslint-config-taro: 3.1.4 => 3.1.4 
      react: ^17.0.0 => 17.0.2 



补充信息

taro h5 的渲染方式有问题,局部更新之后,先渲染了更新的 view 再渲染的 未更新的View。

@taro-bot2 taro-bot2 bot added F-react Framework - React T-h5 Target - 编译到 H5 V-3 Version - 3.x labels Oct 8, 2021
@wc1996
Copy link
Author

wc1996 commented Oct 8, 2021

2021-10-08.4.39.04.mov

@ickg5
Copy link
Contributor

ickg5 commented Oct 10, 2021

#10365 和这个问题是不是很像

@Chen-jj
Copy link
Contributor

Chen-jj commented Oct 27, 2021

@wc#10365 应该是同一个问题,可以查看此评论:#10365 (comment)

@ZakaryCode ZakaryCode added the duplicate This issue or pull request already exists label Jan 6, 2022
@ZakaryCode ZakaryCode added this to H5 Apr 10, 2023
@ZakaryCode ZakaryCode moved this to Done in H5 Apr 10, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
duplicate This issue or pull request already exists F-react Framework - React T-h5 Target - 编译到 H5 V-3 Version - 3.x
Projects
Archived in project
Development

No branches or pull requests

4 participants