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

[LYM0121]

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

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

这个 API 长什么样？

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

[Chen-jj]

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

目前逻辑层的 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
})

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

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

[bigmeow]

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

[Chen-jj]

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

暂时是的