如何解决为什么React应用会在移动设备上冻结?
我使用react开发了一个小应用程序,它在我的计算机上可以正常运行。但是,当我在其他移动设备上打开它时,一分钟左右的使用后它便崩溃了。我不知道是什么原因引起的问题,但奇怪的是,我的控制台上没有任何错误或警告,也没有使用componentDidUpdate或可能引起无限循环的钩子,例如useEffect。如果您知道导致React应用在移动设备上出现故障的原因,或者遇到了相同的问题并找到了解决方案,请帮助我。 这是应用程序
https://summerresort.netlify.app
和代码
https://github.com/Mahmoud-farargy/summerresort/tree/master/Beach-Resort
谢谢!
解决方法
您的应用看起来不错,除了2分。我无法验证我的猜测,但几乎可以完全确定您的问题出在那两个问题上。
两个似乎有问题的部分都位于index.js
中,这里是:
window.addEventListener("scroll",() => {// gets the current height
let scroll = document.body.scrollTop || document.documentElement.scrollTop;
let arrowUp = document.querySelector(".arrow-up-btn").style;
scroll >= 1000 ? arrowUp.display="flex" : arrowUp.display = "none";
});
window.addEventListener("resize",()=> {// gets the current width
this.setState({
currentPageWidth: window.innerWidth || document.documentElement.clientWidth
})
});
第一个代码块很昂贵,因为:
- The scroll event被频繁非常被解雇。
- 您不会listen for scroll passively(不过,这是个好主意)。
- 您设置
style
的频率比所需的频率高得多。
但是,我认为,这是导致手机故障的第二个代码块。
查看this answer,了解为什么the resize event在移动设备上的触发频率比在台式机上更高。
- 现在,每次触发调整大小事件时,
MainApp
的状态 已更新。 - 每次
MainApp
更新时,React都会重新计算其所有子项。 - 默认情况下,React只是重新运行每个孩子的渲染并比较输出。
考虑到MainApp
中拥有所有路由和所有组件,并且您没有实现任何优化(React.PureComponent
,路由的延迟加载等),React将不得不重新计算整个站点的内容看起来像每个resize
事件。
最简单的解决方法是将currentPageWidth
存储在a ref中而不是状态中。
另一个可能的问题是,通过在render方法内附加侦听器,您将在每个单个渲染上附加新的侦听器,而不会清除任何以前添加的侦听器。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。