由于 Remax 框架的实现,小程序 data 会扮演 VDOM 同步管道的作用,因此当同一个页面中存在大量 VDOM 节点,即使触发一个很小的状态变化,也要花很久才能完成渲染。这是因为小程序基础库会在每次数据更新时对全量数据进行 diff。
Boundary 组件是用来隔离那些存在大量数据却不需要频繁更新的容器,它会将容器内部的所有 VDOM 数据自动移入到小程序组件内部,不参与页面 setData,从而允许页面的数据更新保持高性能。
直接在存在大量节点的层级上套一层 <Boundary>...</Boundary>
即可,不需要任何参数。
Boundary 的想法来源于 Taro 的 CustomWrapper 和 Kbone 中的 <wx-view>
写法。
最初我在 Remax Issues 中提了这个 Issue,详细描述了遇到的问题,后来被重定向到这个 Issue。
后来在一次 Remax 源码阅读过程中,发现 Remax 的 App 把一部分 React 虚拟节点渲染到 Page 的实现方法正是我想要的,因此通过完全照搬这部分逻辑,解决了问题。实际上并不需要像上述 issue 那样把组件“编译成”小程序组件,只需要用 Remax 已经实现的 Portal 特性,把想要渲染到组件内部的节点嵌套在 Portal 内,让 React Reconciler 将这部分节点的更新派发给组件层级内的 Container 而不是页面 Container 即可。
如果要进一步理解实现的细节,可参考 Remax Runtime 的源码:
兄弟,你们企鹅有用到remax了吗?