浅谈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 相关文章推荐
表格 隔行换色升级版
Nov 07 Javascript
JQuery操作单选按钮以及复选按钮示例
Sep 23 Javascript
js获取元素的外链样式的简单实现方法
Jun 06 Javascript
移动端日期插件Mobiscroll.js使用详解
Dec 19 Javascript
javascript实现简易计算器
Feb 01 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
Aug 17 Javascript
jquery ztree实现右键收藏功能
Nov 20 jQuery
vue登录路由验证的实现
Dec 13 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
Feb 11 Javascript
webpack vue项目开发环境局域网访问方法
Mar 20 Javascript
微信小程序的开发范式BeautyWe.js入门详解
Jul 10 Javascript
react合成事件与原生事件的相关理解
May 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内核介绍及扩展开发指南―基础知识
2011/09/11 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
PHP基础之输出缓冲区基本概念、原理分析
2019/06/19 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
js以对象为索引的关联数组
2010/07/04 Javascript
js为数字添加逗号并格式化数字的代码
2013/08/23 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
JavaScript中的console.log()函数详细介绍
2014/12/29 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
2015/08/26 Javascript
基于JavaScript实现移除(删除)数组中指定元素
2016/01/04 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
2017/01/23 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
vue文件运行的方法教学
2019/02/12 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
ES6 class的应用实例分析
2019/06/27 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
2020/03/31 Javascript
python开发之字符串string操作方法实例详解
2015/11/12 Python
python使用tensorflow保存、加载和使用模型的方法
2018/01/31 Python
Python OpenCV图像指定区域裁剪的实现
2019/10/30 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
Selenium+BeautifulSoup+json获取Script标签内的json数据
2020/12/07 Python
python 录制系统声音的示例
2020/12/21 Python
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
关于爱情的广播稿
2014/01/16 职场文书
学生操行评语大全
2014/04/24 职场文书
优秀护士演讲稿
2014/04/30 职场文书
2014年党支部学习材料
2014/05/19 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
派出所副所长四风问题个人整改措施思想汇报
2014/10/13 职场文书
西柏坡导游词
2015/02/05 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书
Python快速实现一键抠图功能的全过程
2021/06/29 Python