以下文档记录使用于 tarojs@2.x

Taro 优化目标

• 减少 setData 次数
• 减小 setData 数据大小
• 减少 dom 层级结构
• 减少 dom 总数量

Taro总结

• model 变化后立马通知对应 connect 的组件，小程序会立即调用setData 更新
• 小程序 setData 的 callback 会在界面渲染完成之后调用，可以用来检测渲染时间
• 小程序的 setData 传输到界面层的时间和传输的数据大小成正比
• 小程序 setData 次数要尽量的少，能合并的要合并
• 小程序 render 中声明的变量（包括jsx中使用的方法获取的属性值）会当做新的变量传入 setData 数据中，所以应减少变量声明
• Taro redux 中 connect 数据变化驱动 view 更新，这里的数据变化通过 shallowEqual 比较，只比较2层数据，eg:{a:[{a:1}},{a:3}],b: {a:1,b:2}} 针对这样的数据，只有在a长度变化或某个对象引用变了，或者b中的某个值变化了才是当做更改了
• Taro setData diff 时候如果对象中包含 undefined 值，会把整个对象当做新增的，所以尽量不要有 undefined 的值
• 传递给子组件的方法最好不要直接把从父组件的传入方法直接传下去，可以重写方法，能避免 Taro 自动生成随机方法名，这样可以避免每次编译文件都变化

避免在 map 循环中引用的组件传入计算值

<View className="content">
    {items.length > 0 &&
        items.map((item, i) => (
            <BrickGoodItem good={item} key={i} isStart={nowTime >= conf.start} posid={posid} />
    ))}
</View>

会生成以下的数据

var loopArray0 = items.length > 0 ? items.map(function (item, i) {
        item = {
          $original: (0, _index.internal_get_original)(item)
        };
        var $loopState__temp5 = items.length > 0 ? nowTime >= conf.start : null;
        return {
          $loopState__temp5: $loopState__temp5,
          $original: item.$original
        };
      }) : [];
      Object.assign(this.__state, {
        loopArray0: loopArray0,
        posid: posid,
        items: items
      });
      return this.__state;

这样会使传递给 setData 的数据包含重复 items 和 loopArray0

避免在 render 中使用条件返回

if (condition) {
    return <View/>;
}

Taro 会在createData 方法中生成

if (condition) {
    return null;
}

在以下的 dataDiff 计算更新组件的时候，createData 返回 null 则保持不变，没有变化就不会更新对应组件，可能使得组件还是使用上次 setData 的数据，造成显示错误
if (component._createData) {
   // 返回null或undefined则保持不变
   data = component._createData(state, props) || data;
}

应当使用条件表达式 condition && <View/>