React 笔记--高级指引--Refs and the DOM

最新推荐文章于 2024-03-21 21:35:20 发布

金樽月

最新推荐文章于 2024-03-21 21:35:20 发布

阅读量121

点赞数

分类专栏： React 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/xiangxiang07/article/details/125117462

版权

React 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

本文探讨了如何恰当地使用React中的Refs，包括其在管理焦点、动画触发和第三方库集成中的应用。强调了避免直接操作DOM和使用回调refs以防止过度使用。还提到了过时的String类型Refs，并提供了回调refs的正确用法和注意事项。

摘要由CSDN通过智能技术生成

何时使用 Refs

管理焦点，文本选择或媒体播放。
触发强制动画。
集成第三方 DOM 库。
避免使用 refs 来做任何可以通过声明式实现来完成的事情。
举个例子，避免在 Dialog 组件里暴露 open() 和 close() 方法，最好传递 isOpen 属性。

勿过度使用 Refs

访问 Refs

你不能在函数组件上使用 ref 属性，因为他们没有实例。

将 DOM Refs 暴露给父组件

ref 转发

回调 Refs

React 也支持另一种设置 refs 的方式，称为“回调 refs”。它能助你更精细地控制何时 refs 被设置和解除。

 <input
   type="text"
   ref={this.setTextInputRef}
 />
 this.setTextInputRef = element => {
   this.textInput = element;
 };

过时 API：String 类型的 Refs

this.refs.textInput

关于回调 refs 的说明

如果 ref 回调函数是以内联函数的方式定义的，在更新过程中它会被执行两次，第一次传入参数 null，然后第二次会传入参数 DOM 元素。这是因为在每次渲染时会创建一个新的函数实例，所以 React 清空旧的 ref 并且设置新的。通过将 ref 的回调函数定义成 class 的绑定函数的方式可以避免上述问题，但是大多数情况下它是无关紧要的。