web-dev-qa-db-fra.com

Dois-je utiliser ref ou findDOMNode pour obtenir le nœud dom racine de réaction d'un élément?

Je suis dans une situation où je veux faire des calculs de taille de noeud dom (propriétés haut, bas et taille du noeud DOM rendu)

Ce que je fais en ce moment, sur la méthode componentDidUpdate est d'appeler findDOMNode sur ceci:

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

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

Cela fonctionne bien, mais je suis un peu inquiet pour les performances et je réagis aux meilleures pratiques. Plusieurs endroits parlent de l'utilisation de la propriété ref au lieu de findDOMNode, mais tous sont pour les éléments dom enfants, dans mon cas, je veux seulement le nœud DOM racine de mon composant.

L'alternative utilisant ref peut ressembler à ceci:

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
}

Pour être honnête, attacher un rappel ref à mon nœud dom racine juste pour obtenir sa référence ne me semble pas correct.

Quelle est considérée comme la meilleure pratique dans ce cas? Lequel a de meilleures performances?

javascriptreactjsdomreact-dom
16
Danielo515

Si je me réfère à la doc ( https://facebook.github.io/react/docs/react-dom.html#finddomnode ), findDOMNode semble être plus une astuce que une vraie option. La référence semble être la meilleure option. Le doc implémente le même brouillon que vous avez donné ici (avec la ref={(n) => this.node = n})

9
soywod