Reactjs 使用shouldComponentUpdate（）防止重新安装昂贵的（类）组件（映像列表，路由器内部）

我正在呈现一个非常大的图像列表，当单独单击时，这些图像会添加到“查看器”div中。问题是，每次我向查看器添加图像时，原始列表都会重新呈现，即使列表的内容没有更改

我试过在每个级别使用

shouldComponentUpdate（）

，也试过使用

React.memo

。两者似乎都没有任何效果。我还研究了是否应该花时间使组件功能化和研究挂钩（

useContext（）

看起来很诱人），但我对React太陌生，不知道这是否会浪费更多的时间。（请随时说明这是否浪费时间。）

我不知道问题出在哪里，所以我不确定一个片段会有什么好处。相反，我已经把这个问题剥离到了它的核心，并在这里发布了一个沙盒版本

目前，我的

shouldComponentUpdate

比较对于每个类都非常简单；比如：

if (nextProps.photoData === this.props.photoData) {
  return false;
} else {
  return true;
}

如果打开codesandbox控制台，您将看到我正在记录

Year.js>正在渲染

，以标记相关列表的每个后续渲染

---

任何帮助，即使是朝着正确的方向轻推，都将不胜感激。我已经读了整整一天的博客文章，似乎没有任何帮助

这是因为

App.js

中的

PhotoView

是在render方法中定义的，所以当状态更新导致渲染时，则会再次重新定义

PhotoView

。对于应用程序组件，它每次都是一个新组件

请定义渲染功能之外的组件：

从“React”导入React；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route，Link}；
从“/年”开始输入年份；
从“/Viewer”导入查看器；
从“/dataObj.json”导入dataObj；
导入“/App.css”；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.PhotoView=this.PhotoView.bind（this）
此.state={
当前：{
年份：2019年，
网址：“
},
viewerData:[]，
photoData:null
};
}
componentDidMount（）{
这是我的国家({
photoData:dataObj
});
}
addToViewer=时刻=>
this.setState（state=>{
const viewerData=state.viewerData.concat（矩.props.data）；
返回{
viewerData，
值：“”
};
});
关于（）{
返回(
关于
);
};
照片视图（url）{
返回(
);
}
render（）{
返回(
关于
照片视图
);
}
}
导出默认应用程序；

---

或者将它们移动到单个文件。

功能组件和挂钩是了解react进展情况的方法。给它一个机会来学习和理解hooks解决了什么问题。如果你可以使用redux，1）将你的图像列表数据放在其中，并通过从中获取数据来呈现你的图像列表。2） 创建一个方法，在图像上单击更新redux中的viwer列表数据3）通过从redux获取数据来呈现查看器列表。谢谢@AppleJam！我在这件事上肯定找错了方向。