javascript - 在有状态组件中使用 React 中的 refs

Question

该问题更多地与实现的绩效或最佳实践保持一致。

根据 React 文档，作为 React16 一部分的 refs 只能用于基于类的(有状态的)组件。由于无状态组件没有实例或状态，因此我们不能在无状态组件中使用引用。

将无状态组件更改为有状态或基于类的组件以使用 refs 的权衡是什么？这是一种推荐的方法，还是如果它只是关于引用，我们可以使用文档引用的旧 native 方法或获取元素引用的 Jquery。

将无状态组件更改为有状态组件是否只是为了使用 refs 而不是任何生命周期方法被认为是最佳实践？

Answer 1

据我所知，在将无状态组件转换为有状态组件时，至少在性能方面没有真正的权衡(以下 article 概述了与此相关的一些发现).尽管您可以使用 document.getElementId 或其他一些 native 解决方案继续检索 DOM 元素，但通常最好使用 refs，因为它更符合 React 的方式做事(更详细的 Stack Overflow 响应和讨论这个的线程你可以找到 here 。

如果您在触发某种事件时使用 refs 获取对 DOM 元素的引用，您还可以在不使用任何 refs 的情况下从事件本身检索 DOM 节点。

没有什么强制您实现生命周期 Hook ，即使您将组件转换为基于类的组件。假设性能差异很小，如果您有一个明显的用例想要使用 ref，则将无状态功能组件转换为基于类的有状态组件是合适的，尽管在大多数情况下您可能可以改用事件处理程序.

如果您不想将功能组件转换为基于类的组件，您也可以使用 useRef 钩子(Hook)，它允许您在功能组件中使用 refs 而无需转换为基于类的组件(自 React 16.8 起)​​。