react useMemo 缓存导致缓存组件点击事件获取不到最新值

最新推荐文章于 2024-07-17 16:12:58 发布
最新推荐文章于 2024-07-17 16:12:58 发布
阅读量1.5k 收藏 2
点赞数
分类专栏： react 文章标签： useMemo react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35493664/article/details/120085249
版权
本文探讨了React中useMemo缓存导致组件点击事件获取数据不更新的问题。当使用useMemo缓存span并仅依赖menu时，即使data值改变，点击事件仍获取到旧值。解决方案是将data添加到useMemo的依赖数组中，确保事件处理得到最新值。
摘要由CSDN通过智能技术生成

假如我们有一下两个文件AB, 代码如下
A文件: 通过useMemo把span缓存下来了, 因为只需要menu, 第二个缓存参数只写了menu, 当我们点击span 打印出data数据, 假设初始化 data 为 1, 则打印1

const {
    menu, data} = useContext(Global) 
const [memo]
const test = useMemo(()=>{
最低0.47元/天 解锁文章
CahierX
关注
专栏目录
详解React.memo、useMemo、useCallback
程序员界科比的博客
04-10 940
1：前言 最近开发中使用到了这几个API，这几个API不经常用，刚看到的时候理解也有点模糊，于是网上找了一些讲解并自己动手做了些实验，算是搞明白了。本文主要讲解React.memo、useMemo、useCallback的知识。 2：React.memo React.memo为高阶组件。 如果你的组件在相同 props 的情况下渲染相同的结果，那么你可以通过将其包装在 React.memo中调用，以此通过记忆组件渲染结果的方式来提高组件的性能表现。这意味着在这种情况下，React 将跳过渲染..
reacthooks useMemo用于组件状态更新时在页面上不更新渲染
weixin_50736511的博客
11-03 1896
状态是改变的，在页面上阻止他改变，页面上并不改变
react useMemo的使用心得。为什么总是拿不到最新数据
qq_37766810的博客
11-06 1094
导致所有的数据，只要是从子组件momeTest中执行importCallback，都会是旧的，包括父组件的所有方法、state等。除非update发生了改变，触发了momeTest的重新渲染！如果我们给子组件里用了useMome，且子组件里用到了父组件传一个state。那么即使是父组件的fatherState变化了。：在子组件中，执行importCallback时，拿到的数据是最新的。importCallback方法被传到了子组件，并放在了useMemo使用。，因为使用了useMemo导致。
React的usestate设置了值后马上打印获取不到最新值
最新发布
2401_85955297的博客
07-17 1121
React的usestate设置了值后马上打印获取不到最新值
react（dva） 进入列表页面后返回再次进入 组件不更新的原因（react-router-cache-route）
hzxOnlineOk的博客
10-20 2046
react-router-cache-route 是路由缓存工具，通常在dva的首页app.js中一起搭配使用 但是需要注意的是，每一个route路由路径在定义的时候，都需要指定是否需要cache，如果使用copy大法，很容易忽略 这会导致一种后果，即从路由A点击跳转进入路由B，再由路由B点击返回路由A，最后再次点击跳转进入路由B，打印后会发现，路由B对应的组件没有被重新加载，这正是因为route.js中的配置，配置成了cache=true import { Router, Route } from
[React]关于useEffect初次渲染拿不到值的问题
qq_41786057的博客
07-21 958
所以，当我点击时，页面会去获取此时数据，然后，然后，然后，我的useEffect执行辣！其实到这里，问题点已经浮现出来了，注意我的useEffect函数，嗯，是的，是componentDidMount形式的写法，在页面挂载完毕后再去执行里面的逻辑操作，而这里面最重要的函数就是getCartList，这是获取购物车列表的方法，也是更新页面的方法。所以每次页面显示的都是上一次的数据，而此时的数据其实已经更新了，所以当下一次更新页面时，拿取的数据是上一次更新结束的数据。就是这样，形成了一个延迟的画面，😂。
React中改变useState数值，无法立刻取到新值的问题
arslan-robot
11-01 3828
useState的set操作是异步的，不能立刻取到新值，如果想立刻取到新数值，只能额外再定义一个useRef变量作为副本，在进行set操作的同时更新useRef变量的数值，useRef变量.current可以立刻取到(使用useRef是因为函数组件内不应该使用var/let定义变量,异步操作获取var/let变量数值取到的永远都是最初默认值，例如在click事件中)useState() 的主要作用是允许您创建有状态的 React 组件，并在渲染时动态更新它们的状态。useState的两种set函数。
react-react面试题之提高组件的渲染效率.zip
03-20
3. **useMemo和useCallback**：这两个React Hooks分别用于值的缓存和函数的缓存。`useMemo`可以确保当依赖项未变时，返回的值不会重新计算，减少昂贵的计算开销。`useCallback`则用来缓存回调函数，防止每次渲染时...
详细解读 React useCallback & useMemo
grooyo的博客
11-15 171
阅读本文章需要对 React hooks 中 useState 和 useEffect 有基础的了解。我的这篇文章内有大致介绍 在 React 项目中全量使用 Hooks。简单理解呢 useCallback 与 useMemo 一个缓存的是函数，一个缓存的是函数的返回值。useCallback 是来优化子组件的，防止子组件的重复渲染。useMemo 可以优化当前组件也可以优化子组件，优化当前组件主要是通过 memoize 来将一些复杂的计算逻辑进行缓存。
react-一个可以把文本中多个关键字高亮显示的react组件
08-14
8. **性能优化**：如果文本非常大，为了提高性能，可能需要考虑避免不必要的渲染，比如使用`shouldComponentUpdate`或`React.memo`来比较props变化，或者使用`useMemo`缓存计算结果。 9. **可访问性**：对于高亮的...
React 踩坑 使用useState改变值之后拿不到值的问题？？
dejfwewf的博客
08-01 9660
react使用useState改变值之后拿不到值的问题
React项目中，链接获取不到数据，报错，如何解决
2401_83276728的博客
06-22 471
错误代码 404 服务器无法找到所请求的资源，在你使用 Axios 发送 HTTP 请求时
react useState 异步 数据获取不到
白大美的程序日志
06-29 6889
最近在项目中发现了一个问题，就是异步获取的数据，在useState第一次存储的时候，会有存储不上的时候，问了对接的某大厂的人，趾高气昂充满傲娇的跟我说，没办法，谁让咱们不会那，解决问题就行了，其他的也不重要 const [categtry, setCategtry] = useState([]); const [categData, setCategData] = useState([]); useEffect(() => { getCollaCategory(); }, []);
useState 如何 set 之后立马获取更新后的值
weixin_72099243的博客
06-05 2540
某些场景有需要更新之后马上获取值，除了使用 useEffect 监听值的改变，推荐第二种更加简单明了的方式，项目场景大多数都需要 set 去更改 useState 定义的一些状态。使用 set 回调函数的方式去写。
从React源码角度看useCallback，useMemo，useContext
It_kc的博客
09-30 470
这两个hook原理还是很简单的，因为是系列文章，很多内容和前面文章都重复了，所以导致这篇都没啥能写的了。总结下原理：这两个hook的做法就是通过将函数或者值存储在对应的上，在下次更新时，根据依赖项是否变化来决定是要用缓存值，还是新的传进来的值。虽然和useMemo是为了优化性能出现的，但是各位看官也不要盲目使用，毕竟这两个hook本身也会带来开销。和useMemo的区别？和useMemo的使用场景有哪些？和useMemo是做什么的？和useMemo是怎么实现优化性能的？useContext。
useMemo的基本使用
guoth的博客
03-17 748
useMemo对函数返回结果进行缓存，即使页面没有用到，也会在首次渲染或依赖更新时执行。
02react 函数组件useState的异步问题
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
02-08 5551
因为useState是异步事件，所以会出现不能及时获取到最新值的情况。useState 返回的更新状态方法是异步的，要在下次重绘才能获取新值。不要试图在更改状态之后立马获取状态。注意：useEffect的第二个参数，我表明监听content.title但还是不行，因为在React的函数组件中使用useState进行数据存储，导致数据异步，不能及时获取当前最新的数据。
useMemo可以缓存组件吗
07-14
useMemo 是 React 的一个 Hook 函数，用于在组件中缓存计算结果。它接收两个参数：一个回调函数和一个依赖项数组。useMemo 会在组件渲染过程中执行回调函数，并返回计算结果。当依赖项数组中的值发生变化时，useMemo...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值