React电影网站路由访问Favorites页面卡顿加载异常求助

核心问题定位 #

点击导航栏的Favorites链接时浏览器卡顿，刷新后恢复，单独访问组件正常，说明问题出在路由切换过程中组件的渲染/副作用处理逻辑，而非组件本身功能。大概率是以下几种情况：

排查与修复方向 #

1. 检查Favourite组件的无限循环或重复渲染 #

• 查看Favourite组件中是否存在依赖项错误的useEffect，比如依赖了组件自身状态却在回调中更新该状态，导致无限触发更新：

  // 错误示例：会引发无限循环
  useEffect(() => {
    setFavourites([...favourites, newItem])
  }, [favourites])
  
  // 修复：使用函数式更新，避免依赖状态本身
  useEffect(() => {
    setFavourites(prev => [...prev, newItem])
  }, []) // 仅保留必要的依赖项
  

• 若收藏数据量较大，检查是否直接渲染了全量数据而未做分页/虚拟列表优化，大量DOM节点会直接导致浏览器卡顿。可使用react-window实现虚拟列表，只渲染可见区域元素。

2. 清理未卸载组件的副作用 #

路由切换到/favourites时，首页的Banner/Movies组件应该被卸载，但如果这些组件存在未清理的副作用（定时器、未取消的API请求、WebSocket连接等），会持续占用浏览器资源导致卡顿：

// 在Banner/Movies组件中添加清理逻辑
useEffect(() => {
  const fetchTimer = setTimeout(() => { /* TMDB数据请求逻辑 */ }, 500)
  
  // 组件卸载时清理副作用
  return () => {
    clearTimeout(fetchTimer)
    // 若使用了axios等请求库，可在此取消未完成的请求
  }
}, [])

3. 优化本地存储读取逻辑 #

如果Favourite组件从localStorage读取数据，避免在渲染阶段重复解析JSON，将读取逻辑放在useEffect中仅执行一次：

const [favourites, setFavourites] = useState([])

useEffect(() => {
  const savedData = localStorage.getItem('favourites')
  if (savedData) {
    try {
      setFavourites(JSON.parse(savedData))
    } catch (err) {
      console.error('解析收藏数据失败:', err)
    }
  }
}, []) // 空依赖，仅组件挂载时执行一次

4. 用React DevTools定位卡顿源 #

打开React DevTools的Profiler面板，记录路由切换的过程，查看哪个组件的渲染耗时最长、是否存在不必要的重复渲染，精准定位问题组件。

内容的提问来源于stack exchange，提问作者faiz