我应该使用 ref 还是 findDOMNode 来获取元素的 react root dom 节点？

Question

我想进行一些 dom 节点大小计算（呈现的 DOM 节点的顶部、底部和大小属性）

我现在正在做的，在 componentDidUpdate 方法上调用 findDOMNode on this:

 componentDidUpdate() {
        var node = ReactDOM.findDOMNode(this);

        this.elementBox = node.getBoundingClientRect();
        this.elementHeight = node.clientHeight;
        // Make calculations and stuff
}

这工作正常，但我有点担心性能和 React 最佳实践。有几个地方谈到使用 ref 属性而不是 findDOMNode，但它们都是针对子 dom 元素的，在我的情况下我只想要根 DOM 我的组件的节点。

使用 ref 的替代方案可能如下所示：

render(){
   return (
            <section // container
                ref={(n) => this.node = n}>
                 // Stuff
            </section>
}
 componentDidUpdate() {

        this.elementBox = this.node.getBoundingClientRect();
        this.elementHeight = this.node.clientHeight;
        // Make calculations and stuff
}

老实说，将 ref 回调附加到我的根 dom 节点只是为了获取它的引用对我来说并不正确。

这种情况下的最佳做法是什么？哪个性能更好？

Answer 1

如果我参考文档（https://facebook.github.io/react/docs/react-dom.html#finddomnode), findDOMNode seems to be more a trick than a real option. The ref seems to be the best option. The doc 实现了您在此处给出的相同草案（带有 ref={(n) => this.node = n}）

我应该使用 ref 还是 findDOMNode 来获取元素的 react root dom 节点？

Should I use ref or findDOMNode to get react root dom node of an element?

javascript

reactjs

dom

react-dom