react在移动端开发遇到的性能问题?

最近在用react做移动端的开发,基本情况是,state基本维护在顶层。然后有滑屏的card十几个,每个里面都有echarts图表。真机实测时比较卡顿,主要感觉卡在了state的生效及传递渲染上。有什么性能优化的建议麽? 暂时的优化是 1.加了event通信机制 2.state挪到内部会是个反react设计的方案麽? 然后有必要用immutablejs嘛?
关注者
85
被浏览
2487

7 个回答

看看划屏组件是怎么设计的,是不是第一次加载的时候所有card都被渲染了,只是隐藏而已。
看评论描述,解决方案:
1. 首先不能一次性渲染所有的card,肯定会卡,不过楼主没有这么做。
2. 不要滑到card的时候才去渲染,echart之类的很耗资源,会影响滑动的效果以及处理其他一些任务,这时候需要做预渲染,就是当你在某个卡片的时候,定个时,把周围两个卡片的内容渲染出来,这样滑动的时候就会比较流畅,当滑动到下一个card之后就渲染下一个card的上下两个card,当然如果渲染过了就不用渲染了。