浅谈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 相关文章推荐
Extjs中常用表单介绍与应用
Jun 07 Javascript
jquery 全局AJAX事件使用代码
Nov 05 Javascript
读jQuery之四(优雅的迭代)
Jun 20 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
javascript运算符语法全面概述
Jul 14 Javascript
JS经典正则表达式笔试题汇总
Dec 15 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 Javascript
ES6学习教程之模板字符串详解
Oct 09 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
Aug 30 Javascript
使用vue完成微信公众号网页小记(推荐)
Apr 28 Javascript
ios中视频的最后一桢问题解决
May 14 Javascript
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
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
CodeIgniter生成静态页的方法
2016/05/17 PHP
在Mac OS下搭建LNMP开发环境的步骤详解
2017/03/10 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
php实现的证件照换底色功能示例【人像抠图/换背景图】
2020/05/29 PHP
js的with语句使用方法
2007/09/21 Javascript
动态加载外部javascript文件的函数代码分享
2011/07/28 Javascript
JavaScript实现图片DIV竖向滑动的方法
2015/04/25 Javascript
第六篇Bootstrap表格样式介绍
2016/06/21 Javascript
JS获取url参数、主域名的方法实例分析
2016/08/03 Javascript
js实现非常棒的弹出div
2016/10/06 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
2016/11/10 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
JavaScript实现简单图片轮播效果
2017/08/21 Javascript
vue2.0 根据状态值进行样式的改变展示方法
2018/03/13 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
2018/05/22 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
2018/06/29 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
2018/10/11 Javascript
深入分析jQuery.one() 函数
2020/06/03 jQuery
[04:59]2018DOTA2亚洲邀请赛 4.7 Mineski夺冠时刻
2018/04/09 DOTA
面向初学者的Python编辑器Mu
2018/10/08 Python
更改Python的pip install 默认安装依赖路径方法详解
2018/10/27 Python
python读写Excel表格的实例代码(简单实用)
2019/12/19 Python
浅析Python面向对象编程
2020/07/10 Python
W Concept美国:精选全球独立设计师
2017/02/22 全球购物
同步和异步有何异同,在什么情况下分别使用他们?
2012/12/28 面试题
高中生自我评语大全
2014/01/19 职场文书
水果超市创业计划书
2014/01/27 职场文书
公司端午节活动方案
2014/02/04 职场文书
现场活动策划方案
2014/08/22 职场文书
2014年组织委员工作总结
2014/12/01 职场文书
罚站检讨书
2015/01/29 职场文书
四大名著读书笔记
2015/06/25 职场文书
教师培训学习心得体会
2016/01/21 职场文书
导游词之扬州大明寺
2019/10/09 职场文书