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

问题

I'm on a situation where I want to make some dom-node size calculations (top, bottom and size properties of the rendered DOM node)

What I'm doing right now, on the componentDidUpdate method is to call findDOMNode on this:

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

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

This is working fine, but I'm a bit worried about performance, and react best practices. Several places talks about using ref property instead of findDOMNode, but all of them are for child dom elements, on my case I only want the root DOM node of my component.

The alternative using ref may look like this:

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
}

To be honest, attaching a ref callback to my root dom node just to get it's reference does not feel correct to me.

What is considered the best practice on this case ? Which one has better performance ?

回答1:

If I refer to the doc (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 implements the same draft you gave here (with the ref={(n) => this.node = n})

来源：https://stackoverflow.com/questions/43435881/should-i-use-ref-or-finddomnode-to-get-react-root-dom-node-of-an-element

标签

javascript

reactjs

dom

react-dom