react usestate实现原理(浅谈react useEffect闭包的坑)
react usestate实现原理
浅谈react useEffect闭包的坑问题代码看一段因为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注册点击事件时,作用域如下:
能访问到的自由变量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
5. 将v换成对象类型
其实和使用useRef一样,只要是对象,仅修改某个属性也不会改变该state所指向的地址。
点这里看测试代码
到此这篇关于浅谈react useEffect闭包的坑的文章就介绍到这了,更多相关react useEffect闭包内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
- react动态添加组件属性(react使用antd的上传组件实现文件表单一起提交功能完整代码)
- html5创作(HTML5录音实践总结Preact)
- react 的事件机制(React如何优雅的捕获异常)
- react路由原理解析(React配置子路由的实现)
- react和antd项目教程(React引入antd-mobile+postcss搭建移动端)
- react自适应布局如何实现(React实现分页效果)
- react和antd管理系统(手把手教你从零开始react+antd搭建项目)
- react 使用实例(React+高德地图实时获取经纬度,定位地址)
- react 封装下拉选择框(React鼠标多选功能的配置方法)
- react绑定详解(React列表栏及购物车组件使用详解)
- react hooks详解(React Hooks使用常见的坑)
- react基础知识入门(浅谈React 的引入)
- reactnative示例代码(React Native项目框架搭建的一些心得体会)
- react新手指引页面编写(React+TypeScript进行项目构建案例讲解)
- react组件封装成函数方法(React虚拟列表的实现)
- linux虚拟内存实现需要哪六种机制(解析Linux高性能网络IO和Reactor模型)
- 魅族智能手表充电座曝光 Type-C 接口,线座分离设计(魅族智能手表充电座曝光)
- 华为 Watch GT2 Pro 智能手表曝光,新增支持无线充电(华为WatchGT2)
- vivo首款智能手表来了 也有血氧饱和度监测,一次充电18天续航(vivo首款智能手表来了)
- 你知道 七夕 的真正含义吗(你知道七夕的真正含义吗)
- 七夕的寓意(七夕的寓意)
- 苏志燮赵恩静结婚,韩国四大公共财产变三人,这么快就有替补了(苏志燮赵恩静结婚)
热门推荐
- css3网格布局图(详解CSS3 弹性布局快速入门)
- laravel增删改查接口(laravel-admin 实现给grid的列添加行数序号的方法)
- laravel查询条件数组写法(解决Laravel 使用insert插入数据,字段created_at为0000的问题)
- laravel 数据库实现原理(laravel 数据迁移与 Eloquent ORM的实现方法)
- nginx报错能看到错误代码(nginx提示:500 Internal Server Error错误的解决方法)
- php最好的探针(php探针不显示内存解决方法)
- xampp二次安装方法(xampp中apache在windows7下无法启动的解决方法)
- python整型可以用什么表示(实例介绍Python中整型)
- EasyUI DateBox设置默认值
- docker容器与宿主机通信(docker容器与宿主机的数据交互方式总结)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9