taro 重新加载小程序_Taro 小程序 性能优化

手上有个小程序项目，遇到了挺多坑，有关性能方面的，时间间隔一段时间了，突然发现都快忘完了，赶紧在此记录一下，

一 页面加载耗时

这是首次性能检测时页面加载情况：

页面最长渲染居然达到了900多毫秒！！！，看到问题出在setData,去了解了一下原生小程序的setData渲染工作原理，原来setData里面的所有数据都会被转成字符串，然后字符串又转换成JS脚本，然后页面根据JS脚本去渲染页面，所以我们频繁的去更新setData就会造成页面不断的重排重绘，

了解问题所在，就从根源解决问题，第一点就从数据的获取赋值的地方着手，一方面在需要渲染列表的地方用高阶函数map,只返回需要的数据,如：

let list = data.map(item => {

// item 中可能包含很多不需要的字段 如：{id,name,a,b,c,d,c,d,g....}

//而我们只需要id和name

return {

id: item.id,

name: item.name

}

})

console.log(list) // 输出 [{id:'xx',name:'xx'}]

另一方面在设置state值时，多个值可以合并设置 如：

this.setState({title:'页面标题'})

this.setState({pageC