Taro 框架做了一些性能优化方面的工作,这部分毋需开发者手动处理,开发者可稍做了解。
小程序数据 diff
在真正调用小程序的 setData 方法之前,Taro 会把页面或组件的 state 和当前页面或组件的 data 做一次 diff,只对必要更新的数据做 setData,开发者无需手动优化。
diff 逻辑:
- 全等 => 跳过
- 新增字段 => 使用新值
- 类型不同 => 使用新值
- 类型相同、基础数据类型 => 使用新值
- 其中一方为数组,另一方不是 => 使用新值
- 都为数组、新数组比旧数组短 => 使用新值
- 都为数组、新数组长度大于等于旧数组的长度 => 逐项 diff、按路径更新
- 其中一方为 null,另一方不是 => 使用新值
- 都为对象,新对象缺少旧对象某些属性 => 使用新值
- 都为对象,新对象拥有旧对象所有的属性 => 逐项 diff、按路径更新
例子:
// 新值
const state = {
a: 1,
b: 22,
d: 4,
list: [1],
arr: [1, 'a', true, null, 66],
obj: {
x: 5
},
foo: {
x: 8,
y: 10,
z: 0
}
}
// 旧值
const data = {
a: 1,
b: 2,
c: 3,
list: [1, 2, 3],
arr: [1, 2, 3],
obj: {
x: 10,
y: 8
},
foo: {
x: 'xxx',
y: 10
}
}
diff(data, state)
/**
* diff 结果
{
b: 22,
d: 4,
list: [ 1 ],
'arr[1]': 'a',
'arr[2]': true,
'arr[3]': null,
'arr[4]': 66,
obj: { x: 5 },
'foo.x': 8,
'foo.z': 0
}
*/