React Hooks闭包陷阱如何避免及简要分析？

本文共计3100个文字，预计阅读时间需要13分钟。

目录引言

1.一个熟悉的封闭场景

2.浅谈Hooks原理，理解useEffect的闭包陷阱及原因

3.难道真的要在依赖数组里写上所有的值，才能获取到最新的值？

4.为什么使用useRef足以每次都获取到最新的值？

目录

• 引言
• 1、一个熟悉的闭包场景
• 2 浅谈hooks原理，理解useEffect 的 “闭包陷阱” 出现原因
• 2 难道真的要在依赖数组里写上的值，才能拿到新鲜的值？
• 3 为什么使用useRef能够每次拿到新鲜的值？
• 4 完毕

引言

首先，本文并不会讲解 hooks 的基本用法， 本文从 一个hooks中 “奇怪”（其实符合逻辑） 的 “闭包陷阱” 的场景切入，试图讲清楚其背后的因果。同时，在许多 react hooks 奇技淫巧的文章里，也能看到 useRef 的身影，那么为什么使用 useRef 又能摆脱 这个 “闭包陷阱” ？ 我想搞清楚这些问题，将能较大的提升对 react hooks 的理解。

react hooks 一出现便受到了许多开发人员的追捧,或许在使用react hooks 的时候遇到 “闭包陷阱” 是每个开发人员在开发的时候都遇到过的事情，有的两眼懵逼、有的则稳如老狗瞬间就定义到了问题出现在何处。