页面跳转因involved_companies大数据量卡顿，求性能优化方案

问题场景 #

使用FlatList组件点击列表项跳转至GamePreview页面时，因传递包含involved_companies的大量数据，导致跳转响应延迟2-3秒、性能卡顿，移除该字段后跳转恢复流畅，需针对大数据量场景做性能优化。

优化方案 #

1. 按需获取数据（推荐）

跳转时仅传递游戏ID，在目标页面GamePreview中单独请求involved_companies数据，避免一次性传递超大字段：

PopularNow组件修改：

<TouchableOpacity
  activeOpacity={0.7}
  onPress={() =>
    props.navigation.push('GamePreview', {
      gameId: item.id, // 仅传递游戏ID
      gameName: item.name,
      gameCover: item.cover.image_id,
      // 保留其他必要的小字段
    })
  }>
  {/* 原有UI渲染 */}
</TouchableOpacity>

GamePreview组件处理：

import { useEffect, useState } from 'react';

const GamePreview = ({ route }) => {
  const { gameId } = route.params;
  const [involvedCompanies, setInvolvedCompanies] = useState([]);

  useEffect(() => {
    // 单独请求该游戏的involved_companies数据
    const fetchCompanies = async () => {
      const response = await fetch(`your-api-endpoint/games/${gameId}/involved-companies`);
      const data = await response.json();
      setInvolvedCompanies(data);
    };
    fetchCompanies();
  }, [gameId]);

  // 页面渲染逻辑
};

2. 裁剪冗余字段

提前过滤involved_companies中不需要的字段，只传递GamePreview页面实际用到的数据，直接减少数据体积：

onPress={() => {
  // 只保留页面所需字段，比如id、名称、logo等
  const trimmedCompanies = item.involved_companies.map(company => ({
    id: company.id,
    name: company.name,
    logoId: company.logo?.image_id
  }));

  props.navigation.push('GamePreview', {
    // 其他字段保留
    involveCompanies: trimmedCompanies,
  });
}}

3. 序列化压缩大数据字段

将involved_companies序列化为JSON字符串传递，减少React Navigation自动序列化带来的额外开销：

// 跳转时处理
onPress={() =>
  props.navigation.push('GamePreview', {
    // 其他字段
    involveCompanies: JSON.stringify(item.involved_companies),
  })
}

// GamePreview页面解析
const GamePreview = ({ route }) => {
  const { involveCompanies } = route.params;
  const parsedCompanies = JSON.parse(involveCompanies);
  // 使用parsedCompanies数据
};

4. 全局状态管理传递数据

借助全局状态（Context/Redux）存储完整游戏数据，跳转时仅传递标识，目标页面从全局获取数据：

示例（使用Context）：

1. 创建全局Context：

import { createContext, useContext, useState } from 'react';

const GameContext = createContext();

export const GameProvider = ({ children }) => {
  const [selectedGame, setSelectedGame] = useState(null);
  return (
    <GameContext.Provider value={{ selectedGame, setSelectedGame }}>
      {children}
    </GameContext.Provider>
  );
};

export const useGameContext = () => useContext(GameContext);

2. PopularNow组件中存入全局状态：

const { setSelectedGame } = useGameContext();

// ...
onPress={() => {
  setSelectedGame(item);
  props.navigation.push('GamePreview');
}}

3. GamePreview组件中读取数据：

const { selectedGame } = useGameContext();
const { involved_companies } = selectedGame;
// 使用数据渲染页面

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