这个映射在React缓存中吗？如果是的话，它是如何工作的？
我有下面的示例react.js代码：
const cache = new Map();
const retrieveData = (fileName, data) = {
const data = cache.get(fileName);
if (data === undefined) {
data = someDataRetrievingFunction();
cache.set(fileName, data);
return data;
}
return data;
}
function Ref({fileName}) {
return <div>{retrieveData(fileName)}</div>;
}每次单击post并给出不同的fileName时，都会执行此代码。如果用户单击一个post，退出，然后单击同一个post，映射会缓存第一次获取的数据吗？提前感谢！
回答 2
Stack Overflow用户
发布于 2022-03-18 06:45:19
如果按原样考虑这段代码，那么const cache = new Map();位于文件的根目录中，即
// posts.js
import React from 'react'
const cache = new Map();
// Other codecache是单例的，在整个应用程序运行期间它不会被重置。对你的问题的回答是肯定的，映射会缓存数据。
但这样的守则并不是一个好的做法。考虑一下posts.js是否会在应用程序的几个地方使用。在这种情况下，cache将包含以前缓存的数据，这可能会造成问题。例如，用户可能期望缓存得到更新，但在刷新浏览器之前永远不会更新缓存。另一个缺点是Ref不会在缓存更新时被重命名。所以页面看起来可能有点问题。
另一种方法是将cache放在Ref组件中，如下所示
function Ref({fileName}) {
const [cache, setCache] = React.useState({});
React.useEffect(() = {
let data = cache[fileName];
if (data === undefined) {
data = someDataRetrievingFunction();
setCache(prevCache => {
...prevCache,
[fileName]: data
});
}
}, [fileName])
return <div>{cache[fileName]}</div>;
}这样，在安装组件时，缓存将是稳定的。当组件Ref被卸载时，缓存将被刷新，下一个挂载缓存将被重新创建。
另一种选择可能是将cache放在redux中，如果它可以在应用程序的几个地方使用。
Stack Overflow用户
发布于 2022-03-18 06:31:30
不，每次呈现组件时，呈现函数中的代码都会运行(在每次状态更改时也是如此)。您可能应该使用一个专门的库，比如React查询，它将为您处理缓存。
https://stackoverflow.com/questions/71523135
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号