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

Je suis dans une situation où je veux faire de dom-nœud de calcul de la taille (en haut, en bas et à la taille des propriétés de rendu des nœuds du DOM)

Ce que je suis en train de faire maintenant, sur le componentDidUpdate méthode est d'appeler findDOMNode sur ce:

 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 au sujet de la performance, de réagir et de meilleures pratiques. Plusieurs lieux de discussions sur l'utilisation de ref de la propriété au lieu de findDOMNode, mais ils sont tous pour l'enfant des éléments du dom, sur mon cas, je veux seulement la racine de l'arbre DOM de mon composant.

L'alternative à l'aide de 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, en joignant une ref de rappel à la racine de mes nœud dom juste pour obtenir de référence ne se sent pas correct pour moi.

Ce qui est considéré comme la meilleure pratique sur ce cas ? Qui a de meilleures performances ?

OriginalL'auteur Danielo515 | 2017-04-16

  1. 8

    Si je me réfère à la doc (https://facebook.github.io/react/docs/react-dom.html#finddomnode), findDOMNode semble être plus une astuce qu'une réelle option. L'arbitre semble être la meilleure option. Le doc met en œuvre le même projet que vous avez donné ici (avec le ref={(n) => this.node = n})

    La lecture de la documentation, je viens de trouver: >en Utilisant la réf de rappel juste pour définir une propriété de la classe est un modèle commun pour l'accès aux éléments du DOM. Le meilleur moyen est de définir la propriété dans la ref de rappel comme dans l'exemple ci-dessus.
    En passant, je ne sais pas si vous avez remarqué, mais JS Standard, je suis sur se plaint {(n) => this.node = n} disant "Flèche fonction ne devrait pas revenir de cette cession." Je me demandais est-il légitime de plainte ou pas
    Il ne se traduira pas par une erreur d'exécution, mais il signifie littéralement vous ne devriez pas être de retour d'une mission. Solution facile: {(n) => { this.node = n}}

    OriginalL'auteur soywod