React Native性能优化小技巧

1.清除页面中多余的 State

随着业务的扩展,开发团队的人员更迭,版本迭代等诸多因素的影响,页面中可能存在render函数中使用不到 State 属性。实测证明,即使 render 函数中并未使用,若 State 属性发生改变,仍然会触发 render 函数调用。

2.定时刷新的模块抽取成组件

一般来说,我们定时刷新的模块都是一些很小的部分。所以我们希望刷新的就仅仅是想要刷新的那各部分。所以针对定时刷新的模块抽取成组件,既避免了父组件的多余刷新,也方便维护

3.组件渲染控制交由本身控制

{this.state.show && <Timer />}

我们来看上上述的代码,首先说上述代码通过 show 属性来控制 timer 组件的渲染是没有任何问题的。但是这里会出现我刚才说的问题,此时 show 仅仅与 timer 的组件相关,为什么不把他封装到 timer 里面那?思考一波,此时你的代码会变成这样

<Timer />

当然要考虑业务需求,若一个组件被多个组件使用,有多个渲染控制逻辑,这个时候,封装到组件可能显的又不太合适

4.动画使用 useNativeDriver

这一个我不想多谈,react native 为了提升应用体验而专门做出来的,为啥不用那。作者实际测试发现,性能提高的程度,肉眼可见。强烈建议使用。这里重点说下:

支持transfrom,opacity属性。不支持 flexbox和postion属性

分享快乐你我,还有啥性能提升小技巧,留言告诉

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。