1. 本际云推荐 - 专业推荐VPS、服务器，IDC点评首页
  2. 云主机运维
  3. VPS运维

详解ahooks解决React闭包问题方法

小编小本本 • • VPS运维

React的闭包问题

这里我们来探讨下ahooks是如何解决React的闭包问题的。

详解ahooks解决React闭包问题方法

产生原因在于为了维护FunctionComponent的state，React用链表的方式来存储FunctionComponent里面的hooks，并为每一个hooks创建了一个对象。这个对象的memoizedState属性就是用来存储组件上一次更新后的state，next指向下一个hook对象。

在组件更新的过程中，hooks函数执行的顺序是不变的，就可以根据这个链表拿到当前hooks对应的Hook对象。但是伴随的还有一系列规则，比如不能将hooks写入到if…else…中。从而保证能够正确拿到相应hook的state。

因此，在useEffect中引用的state有可能会是过时的值，因为它形成了一个闭包。这是React的闭包问题。

解决方法

解决方法一：给useEffect设置依赖项，重新执行函数，设置新的定时器，拿到最新值。

解决方法二：使用useRef。useRef返回一个可变的ref对象，其.current属性被初始化为传入的参数（initialValue）。

另外，ahooks中也推出了useLatest和useMemoizedFn来保证获取到最新的值和持久化function的方式，避免闭包陷阱。在每个输出函数中都使用useMemoizedFn包一层。输入函数则使用useRef做一次记录，以保证在任何地方都能访问到最新的函数。

总结与思考

React的FunctionComponentState管理导致了闭包问题，但也可以通过添加依赖或者使用useRef的方式进行避免。ahooks通过useLatest和useMemoizedFn的方式来解决了这个问题。在输出函数中都使用useMemoizedFn包一层，输入函数则使用useRef做一次记录，以保证在任何地方都能访问到最新的函数。

原创文章，作者：小编小本本，如若转载，请注明出处：https://www.benjiyun.com/yunzhujiyunwei/vps-yunwei/7237.html

赞 (1)
小编小本本小编小本本
« 上一篇 2023年4月10日 am8:00
下一篇 » 2023年4月10日 am8:00

相关推荐