积跬步,至千里
精前端,通全栈

6个简单的方式让你的 react native app 提升速度

在我之前的文章中,我谈到了黑客事件循环来提高应用程序的性能。所有这些都可以应用到本地应用程序中。所以,如果你还没有读过这本书,也许现在正是时候。

如果您正在使用react或react native方法来保持较高的FPS,那么您可以做的事情很少。

1、使用 PureComponent 或 shouldComponentUpdate

PureComponent 在 react 里做一个简单的道具和状态比较,然后再更新组件。只有当propsstate 有浅的变化时,它才会重新呈现。

shouldComponentUpdate 生命周期方法用于常规的非纯React组件,通过在某些场景中返回false来取消重新呈现。

以下两个代码示例执行相同的操作。

以上两个示例都可以帮助您节省一些浪费的呈现。第一个示例已经为您实现了 shouldComponentUpdate 逻辑。第二个示例提供了更多的控制。您可以在组件中维护状态,如果状态不变,则停止重新呈现。像这样

2、对列表项使用key属性

列表是任何应用程序中最常用的东西。如果没有为每个列表项指定唯一键,当从列表中添加或删除任何项时,react将重新呈现每个项。在每个列表项上都有唯一的键,保存react重新呈现模式。

3、尽早绑定,不要在渲染中创建函数

不要再render函数中用函数调用:

或者是

因为呈现经常被调用,每次您执行上述两项操作时,都会创建一个新函数。
如果您想将参数传递给doWork函数,您可能需要创建子组件并将函数作为 props 传递。

在子组件中添加doWork:

如果创建组件是过度的,那么总是会有一些性能交换。您可以使用下面这样的闭包。将在每次重新呈现时创建一个函数。

在这种情况下,衡量您的可读性和性能需求。

4、不要在 componentWillUpdate 中更新状态或分派操作

componentWillUpdate 生命周期方法用于准备更新,而不是触发另一个更新。如果你想设置状态,在 componentWillReceiveProps 中执行。并且喜欢componentDidUpdatecomponentWillReceiveProps 上分派任何 redux 操作 (dispatch any redux action)。

5、对于大型数据集,可以使用虚拟化列表、FlatList和SectionList

按照react原生文档的说法,VirtualizedListFlatListSectionList 是呈现列表的性能接口,因为它们占用的内存更少。如果你有一个有数百行的列表,并不是所有的行都被加载到屏幕上直到你向下滚动。
VirtualizedListFlatListSectionList 的基础。如果你有不可变的数据集,你应该直接使用 VirtualizedList

6、使用Perf监视器观察FPS

打开开发工具并启用 perf 监视器 (perf monitor)。现在,当你开始交互、导航或滚动应用程序时,你可能会看到 FPS 下降。它主要在JS线程上,而不是本机 UI线程上。所以开始寻找痛点,FPS下降的地方。您可能在错误的位置设置状态或调度redux操作。或者在JS线程上做太多的同步工作。

我将在下一篇有关react native的文章中分享更多高级技术。当新故事出版时,你可以跟随我获取最新消息 🙂 如果你想添加任何内容,请在评论区发表。

赞(1) 打赏
未经允许不得转载:前端学堂 » 6个简单的方式让你的 react native app 提升速度

讨论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    不错

    uzi2个月前 (10-12)回复

前端实战学习群 学以致用,进步更快

demo演示立即加入

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏