🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## createRef 与 useRef 考虑如下场景,要求点击按钮时,输入框获得焦点 ![](https://img.kancloud.cn/db/39/db39295bc30462bf54f2cae6910dcad7_639x171.png) ### 1. createRef 实现 ![](https://img.kancloud.cn/65/ee/65eeaf385fd379024bda6ac1dc7ebf5f_1494x1052.png) ### 2. useRef 实现 ![](https://img.kancloud.cn/ce/62/ce620e71ea8130de92acb2e4f824c644_1628x1020.png) 既然都可以实现,那区别是什么? ### createRef 和 useRef 的区别 createRef: 每次渲染都会返回一个新的引用 useRef:每次渲染都会返回相同的引用 举个🌰 点击按钮时,当前数值+1,对比 createRef 和 useRef ![](https://img.kancloud.cn/dc/a4/dca43488ddeb3ecc6b5a21e448cec287_404x223.png) ![](https://img.kancloud.cn/e4/e9/e4e9bb314d5cd5429ab86004008721cc_1842x1186.png) * 由于 useRef 的current在第一次赋值之后,就一直是1, 所以每次都会返回1 * 而 createRef 每次都会返回 null,所以每次都可以成功赋值 ## 何时使用 useRef 1. 考虑以下场景:当 界面显示点击次数为1时,alert弹窗中显示的是什么 ![](https://img.kancloud.cn/2a/b3/2ab39d335ef766e38c890e4bd28e38d0_1568x788.png) 结果: ![](https://img.kancloud.cn/b5/b2/b5b2e6c40ca4b292b009bf72226ba4db_708x251.png) 2. 如何能够让弹窗中的数值和页面数值一致(useEffect 中如何获取最新的state) ![](https://img.kancloud.cn/09/89/0989ddd63f3addf9d749c967cd361178_1896x1050.png) 因为 useRef 每次都会返回同一个引用,所以在useEffect中修改的时候,alert中获取到的数值就是我们修改后的数值,这样就可以弹出实时的数值了. useRef 不仅仅是用来管理 DOM ref 的,它还相当于 this , 可以存放任何变量.