纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

react useEffect闭包 浅谈react useEffect闭包的坑

Saitmob   2021-06-08 我要评论
想了解浅谈react useEffect闭包的坑的相关内容吗Saitmob在本文为您仔细讲解react useEffect闭包的相关知识和一些Code实例欢迎阅读和指正我们先划重点:react,useEffect闭包,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组件内部代码会重新执行一遍重新声明了一个vv就不再是原来那个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闭包内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持! 


相关文章

猜您喜欢

  • java取交集retainAll java 取交集方法retainAll的实现

    想了解java 取交集方法retainAll的实现的相关内容吗在本文为您仔细讲解java取交集retainAll的相关知识和一些Code实例欢迎阅读和指正我们先划重点:java取交集,取交集方法,retainAll下面大家一起来学习吧..
  • docker安装jenkins 新手必看docker安装jenkins详细教程

    想了解新手必看docker安装jenkins详细教程的相关内容吗Xdong、在本文为您仔细讲解docker安装jenkins的相关知识和一些Code实例欢迎阅读和指正我们先划重点:docker安装jenkins,docker部署jenkins下面大家一起来学习吧..

网友评论

Copyright 2020 www.fresh-weather.com 【世纪下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式