代码会随着时间的推移降低浏览器性能

Question

我正在为大学的网络编程课程开展一个项目。我几乎完成了主页，但是，当我测试代码时，我注意到每次触发滚动事件时它都会变慢。

该事件处理更改导航栏的外观，当它位于页面顶部时，您将在右上方显示垂直列出的元素，页面上的其他位置正好位于标题下方横向列出元素的栏。

我不打算将代码完全粘贴到线程上，因为我不知道问题出在哪里。我会将链接粘贴到我项目的GitHub仓库中。

https://github.com/edargham/Project-CSC443-Web

Answer 1

每次组件渲染时都会执行

This line，这意味着您将指数越来越多的侦听器添加到窗口上的scroll事件中。你应该只做一次。

修改

通常的做法是在componentWillMount或componentDidMount中添加一个监听器，并在componentWillUnmount中将其删除。有关您应该使用哪种函数的更多信息here。