原因：

闭包陷阱产生的原因就是 useEffect 等 hook 里用到了某个 state，但是没有加到 deps 数组里，这样导致 state 变了却没有执行新传入的函数，依然引用的之前的 state。

解决方式一：

把 state 设置到 deps依赖项里，并添加清理函数；闭包陷阱的解决也很简单，正确设置 deps 数组就可以了，这样每次用到的 state 变了就会执行新函数，引用新的 state。不过还要注意要清理下上次的定时器、事件监听器等。

解决方式二：

useRef；闭包陷阱产生的原因就是 useEffect 的函数里引用了某个 state，形成了闭包，那不直接引用不就行了？useRef 是在 memorizedState 链表中放一个对象，current 保存某个值。通过 useRef 保存回调函数，然后在 useEffect 里从 ref.current 来取函数再调用，避免了直接调用，也就没有闭包陷阱的问题了。

解决 React Hooks 的闭包陷阱相关推荐

如何解决react hook的闭包陷阱以及避开闭包陷阱做优化
前端框架应用hook一度成为趋势. 推出hook的框架,首当其冲就是大名鼎鼎的react. 但是很多时候hook的不正确使用,总会不自觉地掉入闭包陷阱. 首先我们了解一下hook的闭包陷阱是什么? 首 ...
react 中的闭包陷阱
在函数组件中,如果我们在回调函数中使用了 state 的值,那么闭包就会产生.闭包在函数创建时产生,他会缓存创建时的 state 的值. import { useState } from 'react ...
react hooks 闭包陷阱
react Hooks 陷阱 react 函数组件 + hook 为我们带来了,很多的方便,但同时也会遇到一些陷阱 hooks必须在函数顶层 ,不能在条件分支内 ,那么你踩到了那些坑 ? 1.useS ...
React 中闭包陷阱问题分析
背景我在现在这家公司,一直都是用 React 做开发的,对 React 的闭包陷阱也有一定的了解,但是要我解释为什么会有闭包陷阱这个问题,也知道解决闭包的方式,就是 setState 的时候,传一个 ...
[react] React Hooks帮我们解决了哪些问题？
[react] React Hooks帮我们解决了哪些问题? React hooks help use get rid of js class and all trouble with this po ...
React Hooks 实现和由来以及解决的问题
React Hooks 实现和由来以及解决的问题参考文章: (1)React Hooks 实现和由来以及解决的问题 (2)https://www.cnblogs.com/zhongmeizhi/p/ ...
react hook 闭包陷阱问题
项目场景: react中使用hook(useEffect)时遇到的闭包陷阱问题问题描述 react中使用hook(useEffect)时遇到的闭包陷阱问题: 原因分析: 在hook里面的函数,如果是 ...
探React Hooks
前言众所周知,hooks在 React@16.8 中已经正式发布了.而下周周会,我们团队有个同学将会仔细介绍分享一下hooks.最近网上呢有不少hooks的文章,这不免激起了我自己的好奇心,想先行探 ...
通过 React Hooks 声明式地使用 setInterval
2019独角兽企业重金招聘Python工程师标准>>> 本文由云+社区发表作者:Dan Abramov 接触 React Hooks 一定时间的你,也许会碰到一个神奇的问题: se ...

解决 React Hooks 的闭包陷阱

原因：

解决方式一：

解决方式二：

解决 React Hooks 的闭包陷阱相关推荐

最新文章

热门文章