Should I use ref or findDOMNode to get the root dom node element response?

Question

I am in a situation where I want to do some calculations of the size of the dom-node (upper, lower and dimensional rendering properties of the DOM node)

What I'm doing right now, according to the method, componentDidUpdateis to call findDOMNode:

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

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

This works great, but I'm a little worried about work and reacting to best practices. Several places talk about using a property refinstead of findDOMNode, but they are all intended for child dom elements, in my case I only need the DOM root of my component.

An alternative use case for ref might 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
}

, ref dom node , , .

​​ ? ?

Answer 1

(https://facebook.imtqy.com/react/docs/react-dom.html#finddomnode), findDOMNode , . , . doc , ( ref={(n) => this.node = n})