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

【问题标题】：Best way to handle a large set of images from an API using React/Redux?使用 React/Redux 处理来自 API 的大量图像的最佳方法？
【发布时间】：2021-02-06 17:06:32
【问题描述】：

我一直在搞乱这个 Pokemon api https://pokeapi.co/ 并通过在页面上列出所有 pokemon 并制作链接来构建一个非常粗略的 Pokedex 版本，这些链接会将你带到更详细的 Pokemon 页面已选中。

显然，这是一个非常庞大的数据集，将近 1000 个条目。这是一个非常简单的 React 应用程序，它使用 Axios 映射 Pokemon 并获取它们的名称和图像以显示在主页上。

这就是我的问题开始的地方，每次重新加载时，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>
  );
}

这是包含宠物小精灵图像和名称的实际“图块”。其中大约有 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>
    )
}

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

【问题讨论】：

标签： javascript reactjs api pokeapi

【解决方案1】：

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

如果您想缓存 API 调用，我建议您使用我们的官方包装器。 https://github.com/PokeAPI/pokeapi-js-wrapper

【讨论】：