useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.
换句人话说 , useRef 在 react hook 中的作用, 正如官网说的, 它像一个变量, 类似于 this , 它就像一个盒子, 你可以存放任何东西.
createRef 每次渲染都会返回一个新的引用，而 useRef 每次都会返回相同的引用。
如果你还不太理解, 没关系. 我们再用一个例子来加深理解 createRef 和 useRef 的不同之处.
仔细看上面的代码. 它会输出什么 ?
就算组件重新渲染, 由于 refFromUseRef 的值一直存在(类似于 this ) , 无法重新赋值. 运行结果如下:
demo : https://codesandbox.io/embed/jovial-yonath-b24vy
例子参考: https://stackoverflow.com/questions/54620698/whats-the-difference-between-useref-and-createref
何时使用 useRef
为什么要设计 useRef 这个 API ? 我们来结合实际的应用场景来看看. 看一个经典的例子.
你猜 alert 会弹出什么?
是界面上 count 的实时状态 ? 还是在点击 button 时 count 的快照 ?
为什么不是界面上 count 的实时状态?
实际的实现原理复杂得多, 此处可以先简单的理解成下面的普通函数执行.
当我们更新状态的时候, React 会重新渲染组件, 每一次渲染都会拿到独立的 count 状态, 并重新渲染一个 handleAlertClick 函数. 每一个 handleAlertClick 里面都有它自己的 count .
既然这样, 我们就理解了上面的例子, alert 出来的值, 就是当时点击时的 count 值.
如何让点击的时候弹出实时的 count ?
因为 useRef 每次都会返回同一个引用, 所以在 useEffect 中修改的时候 ,在 alert 中也会同时被修改. 这样子, 点击的时候就可以弹出实时的 count 了.
上面的问题解决了, 我们继续, 我们希望在界面上显示出上一个 count 的值. 上代码.
获取上一个值, 这在实际场景中并不少, 我们尝试把它封装成自定义 hook .
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
最后
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。
《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里领取
618191877)**
[外链图片转存中…(img-PC59tOKN-1712571666517)]
[外链图片转存中…(img-ps0WDpzh-1712571666518)]
[外链图片转存中…(img-JI6Lcyfv-1712571666518)]
1748
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
