Question

我正处于一种情况，我想进行一些dom节点大小计算（渲染DOM节点的顶部，底部和大小属性）

我正在做的事情，在componentDidUpdate方法上就是调用findDOMNode：

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

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

这很好用，但我有点担心性能，并做出最佳实践。有几个地方讨论使用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回调附加到我的root dom节点只是为了得到它的参考对我来说感觉不对。

这个案例的最佳做法是什么？哪一个有更好的表现？

Answer 1

如果我参考文档（https://facebook.github.io/react/docs/react-dom.html#finddomnode），findDOMNode似乎更像是一个技巧而不是真正的选择。裁判似乎是最好的选择。 doc实现了您在此处提供的相同草稿（使用ref={(n) => this.node = n}）

我应该使用ref或findDOMNode来获取元素的根节点吗？

1 个答案: