Javascript 使用React/Redux处理来自API的大量图像的最佳方法？

我一直在摆弄这个口袋妖怪api，通过在一个页面上列出所有的口袋妖怪，并制作链接，将你发送到你选择的口袋妖怪的更详细页面，来构建一个非常粗糙的Pokedex版本

显然，这是一个非常大的数据集，几乎有1000个条目。这是一款非常简单的React应用程序，使用Axios在口袋妖怪中进行映射，并抓取它们的名字和图像显示在主页上

这就是我的问题所在，每次重新加载Axios时，Axios都要处理大约1000个图像请求

缓存和提供图像和名称的最佳方式是什么，这样我就不必在每次访问页面时都加载它们了

下面是一些代码，让您了解我到目前为止所做的工作：

function App() {
  const [pokemonList, setPokemonList] = useState([]);
  useEffect(() => {
    const fetchData = async () => {
      let response = await axios.get('https://pokeapi.co/api/v2/pokemon/');
      setPokemonList(response.data.results)
      return response;
    };

    fetchData();
  }, []);

  return (
    <Grid container>
      <Router>

        <Switch>
          <Route path="/pokedex/:id">
            <PokedexEntry pokemonList={pokemonList} />
          </Route>
          <Route path="/">
            <Home pokemonList={pokemonList} />
          </Route>
        </Switch>

      </Router>
    </Grid>
  );
}

函数应用程序（）{
const[pokemonList，setPokemonList]=useState（[]）；
useffect（（）=>{
const fetchData=async（）=>{
let response=等待axios.get（'https://pokeapi.co/api/v2/pokemon/');
setPokemonList（response.data.results）
返回响应；
};
fetchData（）；
}, []);
返回(
);
}

这是包含口袋妖怪图像和名称的实际“磁贴”。其中大约有800个

const PokemonTile = ({ data }) => {

    const [pokemonData, setPokemonData] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            let response = await axios.get(data.url);
            setPokemonData(response.data)
            return response;
        };

        fetchData();
    }, []);

    return (
        <li className="pokemonTile">
            <Link to={`/pokedex/${pokemonData.id}`}>
                {pokemonData.sprites ? <img src={pokemonData.sprites.front_default} /> : ''}
                <div>
                    {pokemonData.name}
                </div>
            </Link>
        </li>
    )
}

constpokemontile=（{data}）=>{
const[pokemonda，setpokemonda]=useState（[]）；
useffect（（）=>{
const fetchData=async（）=>{
let response=wait axios.get（data.url）；
SetPokeMonda（response.data）
返回响应；
};
fetchData（）；
}, []);
返回(

{pokemonada.sprites？：''}
{pokemonada.name}

)
}

---

最好，我不想实现任何类型的延迟加载，因为我希望用户在加载所有条目后能够无缝地看到它们。我是否应该尝试自己为图像提供服务，而不是从和API调用它们，让API处理抓取文本的操作？

最好使用服务人员并缓存所有图像。然后虚拟渲染它们，以便浏览器仅在需要时加载图像。查看React的虚拟列表

---

如果您想缓存API调用，我建议您使用我们的官方包装器

多谢各位！