使用 useRef 或 createRef 而不是 inline ref 有啥优势？

Posted 2023-03-16

【中文标题】使用 useRef 或 createRef 而不是 inline ref 有啥优势？

【英文标题】：What are the advantages for using useRef or createRef rather than inline ref?使用 useRef 或 createRef 而不是 inline ref 有什么优势？

【发布时间】：2020-11-06 18:52:38

【问题描述】：

我正在做代码审查，发现其他开发人员编写的代码，例如：

function sampleComponent() 
       let divRef = ;
    
       return (
        <div ref=(el) =>  divRef = el ></div>
       )
    

然后使用 divRef 作为对 DOM 元素的引用。

但是，我知道的模式是在类组件中使用createRef，在功能组件中使用useRef 钩子。甚至 ReactJS 官方 https://reactjs.org/docs/refs-and-the-dom.html 也表示要避免未来 React 版本的内联引用。它是一种遗留模式吗？

目前我可以研究的是，inline ref 会渲染两次函数，所以建议避免。

我想知道对此还有什么其他解释？

【参考方案1】：

我认为他们建议不要使用 string refs，因为它是一个遗留 API。没有提到不推荐内联引用。正如您所提到的，回调引用/内联引用多次调用函数，这可能是它们的主要警告。

无论如何，我认为如果不需要粒度，createRef 或 useRef 更像是一个“最佳实践”。

对我来说，我尽量使用 createRef 和 useRef，因为它们使用 myRef.current（而不仅仅是 myRef），以避免被它弄糊涂。

【参考方案2】：

要记住的两个细节

Legacy API：String Refs 如果您之前使用过 React，您可能会 熟悉 ref 属性是字符串的旧 API，例如 “textInput”，DOM 节点作为 this.refs.textInput 访问。我们 建议不要这样做，因为字符串引用有一些问题，被考虑 旧版，并且可能会在未来的某个版本中被删除。

这不是inline Ref，这意味着String Ref，inline ref 可以是一个回调模式。 到目前为止，这仅意味着不建议使用 String Ref，因为它是遗留的，并且将在不久的将来被删除。实际上将使用作为参考函数或更复杂的对象进行反应以允许高级用法。

带有回调引用的警告如果引用回调被定义为内联 函数，它会在更新期间被调用两次，首先是 null 和 然后再次使用 DOM 元素。这是因为一个新的实例 每次渲染都会创建函数，所以 React 需要清除旧的 参考并设置新的。您可以通过定义 ref 来避免这种情况 回调作为类的绑定方法，但请注意它不应该 在大多数情况下都很重要。

这里反对回调模式。 Reacts 需要调用两次函数，因为第一次需要清除引用然后分配新值。

这只是一个性能建议，不是什么大问题，而是一个警告标志，因为还有其他更有效的方法。