React中闭包陷阱的几种情及解决方案

更新时间：2024年07月25日 09:48:55 作者：每天工作十小时

在react中我们使用其提供的Hooks中的useState,useEffect,useCallback 时,可能会造成闭包陷阱,下面我们来看一下出现的情况以及如何解决,感兴趣的小伙伴跟着小编一起来看看吧

什么是闭包？

闭包是指在一个函数内部包裹函数，并且内部函数总能访问外部函数的变量。

function f1(){
    var num = 10,
    function f2(){
        alert(num)  // 10
    }
}

特点：

1:函数套函数；

2:内部函数可以直接使用外部函数的局部变量或参数；

3:变量或参数不会被垃圾回收机制回收 GC

缺点：常驻内存会增大内存的使用量使用不当会造成内存泄露。

闭包陷阱以及如何解决

在react中我们使用其提供的Hooks中的useState，useEffect，useCallback 时，可能会造成闭包陷阱，下面我们来看一下出现的情况以及如何解决

useState【异步陷阱】

 const [num, setNum] = useState(0)
  const jia = () => {
    setNum(num + 1)
    console.log(num);
  }
  return (
    <div>
      <h1>{num}</h1>
      <button onClick={() => jia()}>点我+1</button>
    </div>
  )

问题：当我们点击button按钮时，会发现值在持续 +1 ，但是打印的值始终都是上一次点击的值，

因为useState修改值是异步更新，无法获取更新后的值

解决方案：

const [num, setNum] = useState(0)
  const numRef = useRef()
  const jia = () => {
    setNum(num + 1)
    setTimeout(() => {  //模拟异步操作
      console.log(numRef.current.innerText);
    }, 0)
  }
  return (
    <div>
      <h1 ref={numRef}>{num}</h1>
      <button onClick={() => jia()}>点我+1</button>
    </div>
  )

使用useRef来获取元素的值

useEffect【过期问题】

const [num, setNum] = useState(0)
 
  useEffect(() => {
    setInterval(() => {
      setNum(num + 1)
    }, 1000)
  }, [])
 
  return (
    <div>
      <h1>{num}</h1>
    </div>
  )

问题：useEffect是在页面加载时执行，如果第二个参数是一个空数组，则只执行一次，所以我们可以看到页面始终显示的都是1

解决方案：

const [num, setNum] = useState(0)
 
  useEffect(() => {
    let time = setInterval(() => {
      setNum(num + 1)
      clearInterval(time)
    }, 1000)
  }, [num])
 
  return (
    <div>
      <h1>{num}</h1>
    </div>
  )

我们可以通过在空数组中传入依赖项，使得useEffect中的逻辑在num每次更改时都会执行，并在每次执行后都清楚掉定时器

useCallback【缓存问题】

useCallback是用来进行优化的函数，他的作用是返回一个记忆化的回调函数，该回调函数仅在其依赖项发生变化时才会更新。这在处理子组件的 props 或者优化事件处理函数等场景中非常有用。

我们在父组件向子组件传递数据，并在父组件修改值，我们会发现，子组件的useCallback中打印的一直都是0

解决方案：我们在useCallback的空数组中，传入我们的依赖项 props.num 这样每次props.num 发生改变就会重新执行代码

到此这篇关于React中闭包陷阱的几种情及解决方法的文章就介绍到这了,更多相关React闭包陷阱内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

React Grid Layout基础使用示例教程
React Grid Layout是一个用于在React应用程序中创建可拖拽和可调整大小的网格布局的库,通过使用React Grid Layout,我们可以轻松地创建自适应的网格布局,并实现拖拽和调整大小的功能,本文介绍了React Grid Layout的基础使用方法,感兴趣的朋友一起看看吧
2024-02-02
React跨端动态化之从JS引擎到RN落地详解
这篇文章主要为大家介绍了React跨端动态化之从JS引擎到RN落地，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
redux的原理、工作流程及其应用方式
这篇文章主要介绍了redux的原理、工作流程及其应用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
再次谈论React.js实现原生js拖拽效果引起的一系列问题
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站.本文给大家介绍React.js实现原生js拖拽效果，需要的朋友一起学习吧
2016-04-04
详解react如何实现复合组件
在一些react项目开发中,常常会出现一些组合的情况出现,这篇文章主要为大家介绍了复合组件的具体实现,感兴趣的小伙伴可以跟随小编一起学习一下
2024-10-10
React createElement方法使用原理分析介绍
这篇文章主要为大家介绍了React的createElement方法源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
react 不用插件实现数字滚动的效果示例
这篇文章主要介绍了react 不用插件实现数字滚动的效果示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
详解React setState数据更新机制
这篇文章主要介绍了React setState数据更新机制的相关资料，帮助大家更好的理解和学习使用React框架，感兴趣的朋友可以了解下
2021-04-04
react native 原生模块桥接的简单说明小结
这篇文章主要介绍了react native 原生模块桥接的简单说明小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-02-02
记录React使用connect后,ref.current为null问题及解决
记录React使用connect后,ref.current为null问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05