reactjs - 使用connected-react-router时如何防止react页面重新渲染
问题描述
-MainPage.js
import { push } from 'connected-react-router';
const showDataPage = () => {
dispatch(push(ROUTES.DATA))
}
-DataPage.js
export const DataPage = () => {
const dispatch = useDispatch();
React.useEffect(() => {
dispatch(Actions.fetchData());
}, []);
当我导航到 DataPage 屏幕时,它将调用 fetchData api,大约需要 20 秒才能获得响应。
如果我在 20 秒内转到另一个页面而服务器没有完全响应并返回 DataPage,它将触发另一个 fetchData api。
我只想让这个 api 调用这个 DataPage 屏幕的第一次渲染。
我知道这可以使用 useState 或 useRef 来完成,但我想要的是重新使用已经呈现的组件,而不是再次重新安装 DataPage。
使用 connected-react-router 中的 push / replace 将挂载新组件。
谢谢。
解决方案
你可以尝试使用库https://github.com/CJY0208/react-activation来制作keep-alive
路由器 这个库将帮助你只渲染一次 - 第一次访问页面。
推荐阅读
- go - Golang 模板不会加载
- javascript - 触摸屏的 HTML Canvas 帮助
- java - Servlet 过滤器模式来过滤一些路径外的 URL
- postgresql - 如何使用 Golang lib/pq API 将二进制数据插入 PostgreSQL BYTEA 列?
- android - 用高程完成两个面板布局的最有效方法是什么?
- windows - 从“Matlab”调用时,如何在成功分析提交的作业后退出“abaqus”命令窗口到“Matlab”脚本
- tensorflow - tf.keras.layers 中的转置卷积
- matlab - Matlab:ode15i 求解器引发尺寸错误,我看不到在哪里
- c - 无法在代码中找到错误的原因
- asp.net-core - 如何以编程方式将目录角色分配给 Azure AD 中的用户