taro 楼层节点优化是否需要使用View标签或CustomWrapper包裹

nfg76nw0  于 2023-02-04  发布在  其他
关注(0)|答案(3)|浏览(120)

这个特性解决了什么问题?

楼层节点性能优化
关联文章 https://docs.taro.zone/blog/2021-02-08-taro-jxpp
1.1. 删除楼层节点需要谨慎处理

这个 API 长什么样?

开发者无需关心是否使用标签来包裹楼层节点

y1aodyip

y1aodyip1#

的确不应该将删除节点的复杂度暴露给用户,增加心智负担。而且不止 removeChild ,其实 appendChildinsertBefore 都有可能引起和删除节点一样的逻辑。

目前逻辑层的 Taro DOM 树经序列化后的数据结构:

const domTreeData = {
  nodeName: 'view',
  childNodes: [
    { nodeName: 'view', childNodes: [] },
    { nodeName: 'view', childNodes: [] }, // 假设删除此节点
    { nodeName: 'view', childNodes: [] },
  ]
}

假设要删除第二个节点,setData 只能是这样写:

this.setData({
  'domTreeData.childNodes': [
    { nodeName: 'view', childNodes: [] },
    { nodeName: 'view', childNodes: [] },
  ]
})

可以看到必须更新整个数组,因为小程序 setData 对于数组没有提供类似 splice 的操作方法。而如果只是把 'domTreeData.childNodes.[1]' 设为 null,那会导致逻辑层与渲染层数据不一致的问题。

我们也尝试过使用对象代替数组:

const domTreeData = {
  nodeName: 'view',
  childIds: ['_a', '_b', '_c'],
  childeNodes: {
    _a: { nodeName: 'view', childNodes: [] },
    _b: { nodeName: 'view', childNodes: [] },
    _c: { nodeName: 'view', childNodes: [] },
  }
}

删除节点时只需要:

this.setData({
  'domTreeData.childIds': ['_a', '_c'],
  'childeNodes._b': null
})

但在微信小程序里发现,使用对象的初次渲染速度比使用数组时慢很多,遂放弃。

因此目前还没有很好的解决思路,需要和小程序框架的研发团队沟通更好的解决方案

i7uaboj4

i7uaboj42#

也就是说,截止到 3.5.12 版本,目前还是需要下图这种手动优化方式? @Chen-jj

px9o7tmv

px9o7tmv3#

也就是说,截止到 3.5.12 版本,目前还是需要下图这种手动优化方式? @Chen-jj

暂时是的

相关问题