最近刚看开发了个mobx项目,看上去很好的mobx实际测试的性能并不理想,在查阅了一些资料后开始了优化。
具体性能问题表现为
- 操作延时
- 渲染次数过多
- 内存爆表
具体优化如下:
不在view层直接写store操作
,而是调用action方法。view层写store不会直接执行
,而是在渲染完再执行,官网给的实例是在view中写store因为代码结构简单,而且没有网络延时,所以并没有多少延时。复杂的二维数组不要observer
。在写数组时,mobx会逐条写数组,导致view层重复渲染。最后解决方案是view层不observer
,直接用react的生命周期进行优化。obeserver的组件直接shouldComponentUpdate return false
,侦听过的组件不会出发这个生命周期,是否双向绑定也不受这个影响,可以直接return false。