4

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

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 版本的内联 ref。它是一种传统的写作模式吗？

到目前为止我可以研究的是，inlineref会渲染两次函数，因此建议避免。

我想知道对此的其他解释是什么？

4

2 回答 2

5

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

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

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

于 2020-07-17T02:15:46.150 回答
1

两个细节要牢记

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

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

回调 ref 的注意事项 如果 ref 回调被定义为内联函数，它将在更新期间被调用两次，第一次使用 null，然后再次使用 DOM 元素。这是因为每次渲染都会创建一个新的函数实例，所以 React 需要清除旧的 ref 并设置新的。您可以通过将 ref 回调定义为类上的绑定方法来避免这种情况，但请注意，在大多数情况下这无关紧要。

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

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

于 2020-07-17T02:35:20.267 回答