如何避免React重渲染来自URL的图片？Redux列表过滤排序场景

当前应用界面效果 #

功能现状与待解决问题 #

• 搜索与排序为实时生效逻辑：每输入一个字母，应用就会匹配对应内容，但触发过程中会将所有列表项重新渲染
• 输入"hunger"时，应用能正确匹配到《饥饿游戏》系列影片，但明明本地已经存在这些图片资源，仍然会重新请求图片并重新渲染，导致每次搜索、排序操作都需要等待图片加载，体验卡顿。目标是找到方案让图片资源仅加载一次，避免每次搜索、排序时都重复等待加载
• 技术实现背景：应用使用Redux做状态管理，页面渲染的数据全部从store获取，store的初始数据来源为本地JSON文件
• 曾考虑将内容存储到localStorage做缓存，但没有落地实现
• 现有页面代码中未使用ComponentDidMount生命周期方法，也未使用React Hooks做渲染优化

现有页面代码 #

import React from "react";
import "./MoviesAndSeries.css";
import ListShowItem from "./ListShowItem";
import { getVisibleShows } from "../Redux/Selector";
import { connect } from "react-redux";
import FilterShowItems from "./FilterShowItems";
const Movies: React.FC = (props: any) => {
  return (
    <div className="movies">
      <FilterShowItems />
      {props.movies.map((movie: any) => {
        return <ListShowItem key={Math.random()} {...movie} />;
      })}
    </div>
  );
};

const mapStateToProps = (state: any) => {
  return {
    movies: getVisibleShows(state.movies, state.filters),
    filters: state.filters,
  };
};

export default connect(mapStateToProps)(Movies);

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