React Native应用评论数量增多引发卡顿问题求助

每秒在屏幕上添加一条评论，初期运行正常，但随着评论数量增加，应用逐渐卡顿直至近乎冻结。排查后确认：

• 卡顿与API获取的图片、用户信息无关，仅加载JSON评论时也会出现
• 尝试调整FlatList参数、移除ScrollView自动滚动逻辑后问题依然存在，卡顿完全由屏幕上的评论数量导致

相关代码 #

useEffect(() => {
  const getData = async () => {
    try {
      let apiUrl = `https://randomuser.me/api/?results=60&nat=${language}`
      let jsonData

      if (language === "tr") {
        jsonData = require(`./languages/commentstr.json`);
      }
      else {
        jsonData = require(`./languages/commentsus.json`);
      }

      const res = await axios.get(apiUrl);
      setResults(res.data.results);
      const userCount = res.data.results.length; 
      const commentCount = jsonData.length;  

      let randomComments = [];
      for (let i = 0; i < userCount; i++) {
        const commentIndex = i % commentCount;
        randomComments.push(jsonData[commentIndex].text);
      }
      setComments(randomComments);

      const interval = setInterval(() => {
        if (currentIndex < userCount) {
          setCurrentIndex((prevIndex) => prevIndex + 1);
        } else {
          clearInterval(interval);
        }
      }, 1000);

    } catch (error) {
      console.log("hata var:", error);
    }
  };
  getData();
}, [language]);

核心问题 #

原代码一次性生成所有评论并存储，通过currentIndex控制显示数量——每次currentIndex更新时，组件会重新渲染所有已显示的评论项，评论越多，渲染开销越大，最终导致卡顿。

具体优化方案 #

1. 重构评论添加逻辑，避免全量渲染
   放弃用索引控制显示数量，改为每次定时器触发时，仅向评论数组中添加一条新评论。这样列表组件只会渲染新增的单条评论，而非全部重绘。

   修改后的代码：

   useEffect(() => {
     const getData = async () => {
       try {
         let apiUrl = `https://randomuser.me/api/?results=60&nat=${language}`
         let jsonData = language === "tr" 
           ? require(`./languages/commentstr.json`)
           : require(`./languages/commentsus.json`);
   
         const res = await axios.get(apiUrl);
         const userList = res.data.results;
         const commentCount = jsonData.length;  
   
         // 初始化空评论数组
         setComments([]);
         let commentIndex = 0;
         let userIndex = 0;
   
         const interval = setInterval(() => {
           if (userIndex < userList.length) {
             // 每次仅添加单条评论，避免全量更新
             setComments(prevComments => [
               ...prevComments,
               {
                 user: userList[userIndex],
                 text: jsonData[commentIndex % commentCount].text
               }
             ]);
             userIndex++;
             commentIndex++;
           } else {
             clearInterval(interval);
           }
         }, 1000);
   
         // 组件卸载时清除定时器，避免内存泄漏
         return () => clearInterval(interval);
       } catch (error) {
         console.log("hata var:", error);
       }
     };
     getData();
   }, [language]);
   

2. 优化列表组件渲染效率

   • 用React.memo包裹评论项组件，避免无关重渲染：

     const CommentItem = React.memo(({ comment }) => {
       // 评论项渲染逻辑
       return <div>{comment.text}</div>;
     });
     

   • 如果使用FlatList，确保正确设置keyExtractor，并保留虚拟列表特性：

     <FlatList
       data={comments}
       keyExtractor={(item, index) => index.toString()}
       renderItem={({ item }) => <CommentItem comment={item} />}
     />
     

3. 限制屏幕显示的评论数量
   如果不需要展示所有历史评论，可只保留最近N条（比如20条），减少DOM节点数量：

   setComments(prevComments => {
     const updated = [...prevComments, newComment];
     // 只保留最后20条
     return updated.slice(Math.max(updated.length - 20, 0));
   });
   

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