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

fix(runtime): CustomWrapper 嵌套使用后失效 #10873

Merged
merged 10 commits into from
Jan 6, 2022
Merged

fix(runtime): CustomWrapper 嵌套使用后失效 #10873

merged 10 commits into from
Jan 6, 2022

Conversation

CS-Tao
Copy link
Contributor

@CS-Tao CS-Tao commented Dec 9, 2021

这个 PR 做了什么?

这个 PR 是什么类型?

  • 错误修复(Bugfix) issue id CustomWrapper 嵌套使用后失效 #10872
  • 新功能(Feature)
  • 代码重构(Refactor)
  • TypeScript 类型定义修改(Typings)
  • 文档修改(Docs)
  • 代码风格更新(Code style update)
  • 其他,请描述(Other, please describe):

这个 PR 涉及以下平台:

  • 所有小程序
  • 微信小程序
  • 支付宝小程序
  • 百度小程序
  • 字节跳动小程序
  • QQ 轻应用
  • 京东小程序
  • 快应用平台(QuickApp)
  • Web 平台(H5)
  • 移动端(React-Native)

@taro-bot2
Copy link

taro-bot2 bot commented Dec 9, 2021

欢迎提交 PR~ Taro 非常感谢您对开源事业做出的贡献!🌷🌷🌷

一般 PR 会在一到两周内进行 review,成功合入后会随下一个版本进行发布。

Review 需要耗费大量时间,所以请遵循以下规范,协助我们提高 review 效率🙏🙏🙏

  1. 详细介绍 PR 的背景(非常重要,例如解决了什么问题,该问题如何复现等)
  2. 确保 CI 顺利运行。
  3. 最好能提供对应的测试用例。

为了更好地进行沟通,请加入 Taro 开发者微信群:

@CS-Tao CS-Tao changed the title fix(runtime): CustomWrapper 嵌套使用后失效 WIP: fix(runtime): CustomWrapper 嵌套使用后失效 Dec 9, 2021
@CS-Tao CS-Tao changed the title WIP: fix(runtime): CustomWrapper 嵌套使用后失效 fix(runtime): CustomWrapper 嵌套使用后失效 Dec 10, 2021
@CS-Tao CS-Tao changed the title fix(runtime): CustomWrapper 嵌套使用后失效 WIP: fix(runtime): CustomWrapper 嵌套使用后失效 Dec 10, 2021
@CS-Tao CS-Tao changed the title WIP: fix(runtime): CustomWrapper 嵌套使用后失效 fix(runtime): CustomWrapper 嵌套使用后失效 Dec 10, 2021
packages/taro-runtime/src/dom/root.ts Show resolved Hide resolved
packages/taro-runtime/src/dom/root.ts Outdated Show resolved Hide resolved
packages/taro-runtime/src/utils/index.ts Outdated Show resolved Hide resolved
@CS-Tao
Copy link
Contributor Author

CS-Tao commented Dec 13, 2021

@Chen-jj 更新了一版 4adbc49

  • 修改了 CustomWrapper 缓存机制:在 attached 和 detached 生命周期中管理缓存
  • 考虑到 data 只能从 parent CustomWrapper 或 page 实例中获取,仍然采用了从前往后遍历 custom-wrapper 实例
  • 因为在部分终端存在无法获取到 CustomWrapper 实例的情况,添加了警告日志并放弃对该 CustomWrapper setData(在飞书开发工具的远程调试中经常出现,不确定原因,感觉和远程调试时的 attached 执行时机有关)

相关改动已在我们项目(飞书平台的小程序)中完成测试

@CS-Tao
Copy link
Contributor Author

CS-Tao commented Dec 16, 2021

改了一版,上一版在我们项目中发现会存在卡顿的问题,还是得采取从后往前寻找 CustomWrapper 的方式

我从头改了一下,主要改了两个地方

  1. 使用 customWrapperCache 避免每次使用 ctx.selectComponent 查询 dom。缓存在 CustomWrapper 的生命周期中管理
  2. TaroRootElement 使用 this.data 来储存页面和页面内的所有 CusotmWrapper 节点的数据,以保障在从后往前寻找 CustomWrapper 时能通过 this.data 顺利取到 nn 和 uid
    • 如果不使用 this.data 来管理数据,那么 nn 和 uid 来源应该是当前节点的 Parent CustomWrapper 或 page,需要从前往后寻找

这样改动增加了 this.data 作为 page 和 CustomWrapper 数据的拷贝版本(仅引用),但经过测试发现性能会有明显地提升

前面的评论我 resolve 掉了,辛苦重新 review 下改动

@Chen-jj
Copy link
Contributor

Chen-jj commented Jan 5, 2022

@CS-Tao

抱歉这么久才 Review。

CustomWrapper 的逻辑可以分三步:

  1. 根据 setData 的数据路径,从后往前地寻找 CustomWrapper 和其 id
  2. 根据 CustomWrapper 的 id 寻找对应的自定义组件实例
  3. CustomWrapper setData

关于第一点,老哥你的方法是用 this.data 保存一份页面 data 数据的映射,方便按路径寻找 CustomWrapper 的 id。但是,Taro 的 DOM 树其实就已经拥有了这些信息,不需要另外通过 this.data 来保存。

关于第二点,利用 CustomWrapperCache 能很好地处理。

另外方便的话可以加一下开发者微信群咯,可以再沟通一下

@Chen-jj Chen-jj merged commit 7af5512 into NervJS:next Jan 6, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

CustomWrapper 嵌套使用后失效
2 participants