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

Question

该问题更适合于绩效或实施的最佳实践。

根据React Docs，作为React16一部分的refs只能在基于类（有状态）的组件中使用。由于无状态组件没有实例或状态，因此我们无法在无状态组件中具有引用。

将无状态组件更改为有状态或基于类的组件以使用引用有何权衡？是推荐的方法，还是仅关于引用，我们可以使用文档引用或Jquery的旧本机方法获取元素引用。

将仅使用ref而不是任何生命周期方法的无状态组件更改为有状态组件是否被视为最佳实践？

Answer 1

据我所知，将无状态组件转换为有状态组件时并没有真正的权衡，至少在性能方面（以下 article 概述了有关对此）。尽管您可以使用 document.getElementId 或其他一些本机解决方案来检索DOM元素，但通常最好使用refs，因为它与React的工作方式更加内联（更多

详细的Stack Overflow响应和讨论该主题的线程可以找到 here 。

如果在触发某种事件时使用引用来获取对DOM元素的引用，则还可以从事件本身中检索DOM节点，而无需使用任何引用。

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

如果您不想将功能组件转换为基于类的组件，则还可以使用 useRef 钩子，该钩子将允许您在功能组件中使用引用无需转换为基于类的组件（因为React 16.8 ）。