关注本站公众号,
获取永久访问授权码
扫码关注,回复『刷题』即可
~技术问答题~
返 回

No.716 React实现的移动应用中,如果出现卡顿,有哪些可以考虑的优化方案(喜马拉雅)

题目描述~ 略...

寄语:问题比答案更重要

建议自己先有个思考的过程,有了自己的答案或者疑问再看解析进行对比。

目前解析在逐步添加中,也可以跳转链接查看。

「解析1

(1) 增加shouldComponentUpdate钩子对新旧props进行比较,如果值相同则阻止更新,避免不必要的渲染,或者使用PureReactComponent替代Component,其内部已经封装了shouldComponentUpdate的浅比较逻辑;

(2) 对于列表或其他结构相同的节点,为其中的每一项增加唯一key属性,以方便React的diff算法中对该节点的复用,减少节点的创建和删除操作;

(3) render函数中减少类似onClick={() => {doSomething()}}的写法,每次调用render函数时均会创建一个新的函数,即使内容没有发生任何变化,也会导致节点没必要的重渲染,建议将函数保存在组件的成员对象中,这样只会创建一次;

(4) 组件的props如果需要经过一系列运算后才能拿到最终结果,则可以考虑使用reselect库对结果进行缓存,如果props值未发生变化,则结果直接从缓存中拿,避免高昂的运算代价;

(5) webpack-bundle-analyzer分析当前页面的依赖包,是否存在不合理性,如果存在,找到优化点并进行优化。

来源 https://juejin.im/post/5db556376fb9a0207a6ddce7#heading-24

解析或答案仅供参考。

关于作者

zz_jesse 专注前端

掘金 我的开源项目

公众号@前端技术江湖

一个可以帮开发者成长的公众号前端面试题库更新通知前端学习资料、干货文章

技术交流群

交流中成长大厂内推机会