一个需求搞懂useRef和createRef的区别

Nancyeah

已于 2023-05-16 16:48:25 修改

阅读量262

点赞数 2

文章标签： react.js typescript 前端 javascript

于 2023-05-16 16:48:12 首次发布

本文链接：https://blog.csdn.net/Nancyeah/article/details/124386431

版权

问题描述

要求实现的效果是点击每个父组件上的按钮调用子组件的新增方法，使得子组件新增一个配置，我尝试用使用ref绑定组件。一开始未全面搞清楚useRef和createRef的区别，上来就使用useRef，结果是无论点击哪个父组件，始终都是第一个父组件里的子组件在新增。

原因分析

在阅读react官方文档给出对useRef的解读时，忽略了最重要的一句话：
useRef的官方解读
“每次渲染返回同一个ref对象”意味着就算组件重新渲染，useRef也不会改变引用，这就很明显地指出了造成本次结果的原因。

解决方案

将使用的useRef替换成createRef即可实现原本想要的效果。

总结useRef和createRef的区别

先看官网给出的例子：

两个关于useRef的例子：

常见使用示例：
当配合useImperativeHandle一起使用时的示例：

关于createRef的例子：

给的例子是不是看不出createRef和useRef的区别…
其实官方示例就表明：useRef是在函数组件中使用，createRef在class组件中使用。因为createRef并没有hook的效果，所以在函数组件中使用createRef会不断初始化导致找不到ref绑定的元素，而useRef的效果恰恰是需要的，它的引用不变，在不改变它之前，它都是返回被绑定的那个元素。有趣的是这次提出的需求却让我在函数组件里用了createRef，需要它在函数组件里不断被初始化的这个特性。

总结

使用函数式组件开发之后我通常使用useRef替代class组件里的componentWillRecieveProps来判断某个变量在这一次和上一次props的变化，由于我常常使用useRef，需要用ref的时候就首选这个，并没有去考虑过用其他的就导致了这个问题的发生。当然，我觉得这次问题也是比较有意思的，让我在这样的一个机缘巧合里在函数组件使用createRef，打破了常规思维：函数组件就选择useRef，class组件就选择createRef。打怪升级经验值+1，对于官方文档还是需要多研读，有可能一句话没看到或者没放心上，就踩坑了。