不管在Vue中还是React，如果我们想使用一个元素的DOM，不需要通过JS中操纵DOM的方法，它们提供了一个专属的API就是ref。
而Vue中的ref可能比较简单（直接this.$refs.xxx就可以），这一篇主要讲一下如何在React中使用ref。
定义：
ref是reference的简写，它是一个引用，在react中，我们使用ref来操作DOM。
使用：
【refs的字符串形式】已经被弃用
了解就行了。
虽然点击按钮可以打印input1，但控制台会报错。提示报错信息，翻译为：
在一个严格模式树中找到了一个字符串ref“input1”。字符串引用是潜在错误的来源，应该避免。我们建议使用useRef() 或createRef()
【回调ref】
简写形式：
<input ref={c => this.input1 = c } type="text" placeholder="点击按钮提示数据" />这样就不会报错了
补充：回调ref中回调执行次数问题—了解就行，不需要解决
【官方回答】如果 ref 回调函数是以内联函数的方式定义的，在更新过程中它会被执行两次，第一次传入参数 null，然后第二次会传入参数 DOM 元素。这是因为在每次染时会创建一个新的函数实例，所以 React 清空旧的 ref 并且设置新的。通过将 ref 的回调函数定义成class 的绑定函数的方式可以避免上述问题，但是大多数情况下它是无关紧要的。
【createRef的使用】
React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点。
createRef 是 **React v16.3 ** 新增的API，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。
Refs 是使用 React.createRef() 创建的，并通过 ref 属性附加到 React 元素。
Refs 通常在 React 组件的构造函数中定义，或者作为函数组件顶层的变量定义，然后附加到 render() 函数中的元素
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/149625.html
