浅谈react useEffect闭包的坑


Posted in Javascript onJune 08, 2021

问题代码

看一段因为useEffect导致的闭包问题代码

const btn = useRef();
const [v, setV] = useState('');

useEffect(() => {
    let clickHandle = () => {
        console.log('v:', v);
    }
    btn.current.addEventListener('click', clickHandle)
    
    return () => {
        btn.removeEventListener('click', clickHandle)
    }
}, []);
    
const inputHandle = e => {
    setV(e.target.value)
}

return (
        <>
            <input value={v} onChange={inputHandle} />
            <button ref={btn} >测试</button>
        </>
    )

useEffect的依赖项数组为空,所以在页面渲染完成之后,内部代码只会执行一次,页面销毁再执行一次。此时在输入框中输入任意字符,再点击测试按钮,得到的输出为空,之后无论如何输入任何字符,再点击测试按钮时,输出的结果仍为空。

为什么会这样呢?其实就是闭包所造成的。

产生原因

函数的作用域在函数定义的时候就决定了

给btn注册点击事件时,作用域如下:

浅谈react useEffect闭包的坑

能访问到的自由变量v此时还是空值。当点击事件触发时,执行点击回调函数,此时先创建执行上下文,会拷贝作用域链到执行上下文中。

  • 如果未在输入框内输入字符,此时点击拿到的v还是原来那个v
  • 如果在输入框内输入了字符,此时调用了setV修改了state,页面触发render,组件内部代码会重新执行一遍,重新声明了一个v,v就不再是原来那个v,这里点击事件里作用域中的v还是旧的v,这是两个不同的v

产生场景

  • 事件绑定。比如示例代码中,在页面最初渲染完成后只绑定一次事件的情况,比如使用echarts,在useEffect中获取echarts的实例并绑定事件
  • 定时器。页面加载后注册一个定时器,定时器内的函数也会产生如此的闭包问题。

解决办法

针对这个闭包问题下面大致给出5种解决办法

1. 以赋值方式直接修改v,并将修改v的方法用useCallback包裹起来

将修改v的方法用useCallback包裹起来,被useCallback包裹的函数将被缓存,由于依赖项的数组为空,所以这里直接赋值的方式修改的v是旧的v,此种方法不推荐,因为setState才是官方推荐的修改state的方式,这里仍然使用setV只是为了触发rerender

// v 的声明 由 const 改为 var,方便直接修改
var [v, setV] = useState('');

const inputHandle = useCallback(e => {
    let { value } = e.target
    v = value
    setV(value)
}, [])

2. 给useEffect的依赖项加上v

这也许是大多数人首先想到的办法,既然v是旧的,那么每次v更新的时候,重新注册一次事件不就行了,但是这样的会导致每次v更新都得重新注册,理论应该只需要注册一次的事件变成了多次。

3. 避免v被重新声明

以let或var的方式声明某个变量代替v,直接修改这个变量,而不是要setState相关函数触发render,这样就不会被重新声明,点击的回调函数里就能拿到“最新”的值,但这个方法更不推荐,就此示例来说,input组件由于没有rerender而至始至终都是显示空值,不符合操作预期。

4. 使用useRef代替useState

const btn = useRef();
const vRef = useRef('');
const [v, setV] = useStat('');

useEffect(() => {
    let clickHandle = () => {
        console.log('v:', vRef.current);
    }
    btn.current.addEventListener('click', clickHandle)
    
    return () => {
        btn.removeEventListener('click', clickHandle)
    }
}, []);

const inputHandle = e => {
    let { value } = e.target
    vRef.current = value
    setV(value)
}

return (
        <>
            <input value={v} onChange={inputHandle} />
            <button ref={btn} >测试</button>
        </>
    )

useRef的方案之所以有效,是因为每次input的change修改的是vRef这个对象的current属性,而vRef始终是那个vRef,即使rerender,由于vRef是对象,所以变量存储在栈内存中的值是该对象在堆内存中的地址,只是一个引用,只修改对象的某个属性,该引用并不会改变。所以点击事件中的作用域链始终访问的都是同一个vRef

浅谈react useEffect闭包的坑

5. 将v换成对象类型

其实和使用useRef一样,只要是对象,仅修改某个属性也不会改变该state所指向的地址。

代码地址

这里看测试代码

到此这篇关于浅谈react useEffect闭包的坑的文章就介绍到这了,更多相关react useEffect闭包内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木! 

Javascript 相关文章推荐
javascript 动态生成私有变量访问器
Dec 06 Javascript
jquery实现的鼠标拖动排序Li或Table
May 04 Javascript
基于javascript的JSON格式页面展示美化方法
Jul 02 Javascript
学习javascript面向对象 理解javascript对象
Jan 04 Javascript
javascript 继承学习心得总结
Mar 17 Javascript
js验证手机号、密码、短信验证码代码工具类
Jun 24 Javascript
xmlplus组件设计系列之列表(4)
Apr 26 Javascript
Node.js五大应用性能技巧小结(必须收藏)
Aug 09 Javascript
微信小程序 页面跳转事件绑定的实例详解
Sep 20 Javascript
WebSocket的通信过程与实现方法详解
Apr 29 Javascript
vue给组件传递不同的值方法
Sep 29 Javascript
js实现滚动条自动滚动
Dec 13 Javascript
Vue中插槽slot的使用方法与应用场景详析
vue+elementui 实现新增和修改共用一个弹框的完整代码
解决vue $http的get和post请求跨域问题
vue Element-ui表格实现树形结构表格
Jun 07 #Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 #Vue.js
浅谈JS的原型和原型链
vue响应式原理与双向数据的深入解析
You might like
php字符串比较函数用法小结(strcmp,strcasecmp,strnatcmp及strnatcasecmp)
2016/07/18 PHP
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
基于JavaScript代码实现微信扫一扫下载APP
2015/12/30 Javascript
如何快速上手Vuex
2017/02/14 Javascript
js评分组件使用详解
2017/06/06 Javascript
简述vue中的config配置
2018/01/23 Javascript
关于express与koa的使用对比详解
2018/01/25 Javascript
vue 利用路由守卫判断是否登录的方法
2018/09/29 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
vue中是怎样监听数组变化的
2020/10/24 Javascript
python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
2014/02/24 Python
python爬虫爬取淘宝商品信息(selenum+phontomjs)
2018/02/24 Python
Pycharm 创建 Django admin 用户名和密码的实例
2018/05/30 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
使用pyplot.matshow()函数添加绘图标题
2020/06/16 Python
Python用K-means聚类算法进行客户分群的实现
2020/08/23 Python
虚拟环境及venv和virtualenv的区别说明
2021/02/05 Python
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
应届生服务员求职信
2013/10/31 职场文书
小学生红领巾广播稿
2014/01/21 职场文书
预备党员政审材料
2014/02/04 职场文书
党员实事承诺书
2014/03/26 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
商务经理岗位职责
2014/08/03 职场文书
高三毕业评语
2014/12/31 职场文书
2016年小学党支部创先争优活动总结
2016/04/05 职场文书
用 Python 元类的特性实现 ORM 框架
2021/05/19 Python
MySQL通过binlog恢复数据
2021/05/27 MySQL
Nginx的gzip相关介绍
2022/05/11 Servers
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers