附录一：优化 setdata 逻辑方案明细 -凯发app官方网站

开始使用

ampe

多端开发

鸿蒙

插件

安全

openid 开发指南

扩展能力

开发质量

功能凯发app官方网站的解决方案

稳定性凯发app官方网站的解决方案

性能凯发app官方网站的解决方案

附录一：优化 setdata 逻辑方案明细

小程序启动耗时优化-高级发布策略

社区方案

更新时间：2023-07-28 17:43:39

贡献者

订阅更新

我的文档

设置

优化 setdata 逻辑

任何页面变化都会触发 setdata，同一时间可能会有多个 setdata 触发页面进行重新渲染。如下四个接口都会触发 web-view 页面重新渲染。

●

page.prototype.setdata：触发整个页面做差异比较；

●

page.prototype.$splicedata：针对长列表做优化，避免每次传递整个列表，触发整个页面做差异比较；

●

component.prototype.setdata：只会从对应组件节点开始做差异比较；

●

component.prototype.$splicedata：针对长列表做优化，避免每次传递整个列表，只会从对应组件节点开始做差异比较。

优化建议

●

避免频繁触发 setdata 或者 $splicedata，不管是页面级别还是组件级别。在我们分析的案例中，有些页面有倒计时逻辑，但是有的倒计时过于频繁触发（ms 级别的触发）；

●

需要频繁触发重新渲染时，避免使用页面级别的 setdata 和 $splicedata，将这一块封装成自定义组件，然后使用组件级别的 setdata 或 $splicedata 触发组件重新渲染；

●

长列表数据触发渲染时，使用 $splicedata 多次追加数据，而不用传递整个列表；

●

复杂页面建议封装成自定义组件，减少页面级别的 setdata。

优化案例

推荐指定路径设置数据

this.setdata({

'array[0]': 1,

'obj.x':2,

});

不推荐如下用法（虽然拷贝了 this.data，仍然直接更改了其属性）

const array = this.data.array.concat();

array[0] = 1;

const obj={...this.data.obj};

obj.x=2;

this.setdata({array,obj});

更不推荐直接更改 this.data（违反不可变数据原则）

长列表使用 $splicedata

注意

有时业务逻辑封装到了组件中，当组件 ui 需要重新渲染时，只需在组件内部调用 setdata。但有时需要从页面触发组件重新渲染，比如在页面上监听了 onpagescroll 事件，当事件触发时，需要通知对应组件重新渲染，此时的处理措施如下所示：

可在组件的 didmount 中将组件挂载到对应的页面上，即可在页面中调用组件级别的 setdata 只触发组件重新渲染。

相关问题