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

Question

我在进行代码审查时发现了另一位开发人员编写的代码，例如：

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

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

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

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

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

Answer 1

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

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

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

Answer 2

需要记住的两个细节

Legacy API: String Refs If you worked with React before, you might be familiar with an older API where the ref attribute is a string, like "textInput", and the DOM node is accessed as this.refs.textInput. We advise against it because string refs have some issues, are considered legacy, and are likely to be removed in one of the future releases.

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

Caveats with callback refs If the ref callback is defined as an inline function, it will get called twice during updates, first with null and then again with the DOM element. This is because a new instance of the function is created with each render, so React needs to clear the old ref and set up the new one. You can avoid this by defining the ref callback as a bound method on the class, but note that it shouldn’t matter in most cases.

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

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

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

What are the advantages for using useRef or createRef rather than inline ref?

ref

reactjs

use-ref

create-ref