Taro 框架做了一些性能优化方面的工作,这部分毋需开发者手动处理,开发者可稍做了解。

小程序数据 diff

在真正调用小程序的 setData 方法之前,Taro 会把页面或组件的 state 和当前页面或组件的 data 做一次 diff,只对必要更新的数据做 setData,开发者无需手动优化。

diff 逻辑:
  1. 全等 => 跳过
  2. 新增字段 => 使用新值
  3. 类型不同 => 使用新值
  4. 类型相同、基础数据类型 => 使用新值
  5. 其中一方为数组,另一方不是 => 使用新值
  6. 都为数组、新数组比旧数组短 => 使用新值
  7. 都为数组、新数组长度大于等于旧数组的长度 => 逐项 diff、按路径更新
  8. 其中一方为 null,另一方不是 => 使用新值
  9. 都为对象,新对象缺少旧对象某些属性 => 使用新值
  10. 都为对象,新对象拥有旧对象所有的属性 => 逐项 diff、按路径更新

例子:

  1. // 新值
  2. const state = {
  3. a: 1,
  4. b: 22,
  5. d: 4,
  6. list: [1],
  7. arr: [1, 'a', true, null, 66],
  8. obj: {
  9. x: 5
  10. },
  11. foo: {
  12. x: 8,
  13. y: 10,
  14. z: 0
  15. }
  16. }
  17. // 旧值
  18. const data = {
  19. a: 1,
  20. b: 2,
  21. c: 3,
  22. list: [1, 2, 3],
  23. arr: [1, 2, 3],
  24. obj: {
  25. x: 10,
  26. y: 8
  27. },
  28. foo: {
  29. x: 'xxx',
  30. y: 10
  31. }
  32. }
  33. diff(data, state)
  34. /**
  35. * diff 结果
  36. {
  37. b: 22,
  38. d: 4,
  39. list: [ 1 ],
  40. 'arr[1]': 'a',
  41. 'arr[2]': true,
  42. 'arr[3]': null,
  43. 'arr[4]': 66,
  44. obj: { x: 5 },
  45. 'foo.x': 8,
  46. 'foo.z': 0
  47. }
  48. */