web-dev-qa-db-ja.com

refまたはfindDOMNodeを使用して、要素の反応ルートdomノードを取得する必要がありますか？

私はいくつかのDOMノードのサイズ計算（レンダリングされたDOMノードの上部、下部、サイズのプロパティ）を行いたい状況にいます

componentDidUpdateメソッドで今やっていることは、これに対してfindDOMNodeを呼び出すことです。

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

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

これは正常に機能していますが、パフォーマンスが少し心配で、ベストプラクティスに対応しています。 findDOMNodeの代わりにrefプロパティを使用することについていくつかの場所で話していますが、それらはすべて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コールバックをルートdomノードにアタッチすると、私には正しく感じられません。

この場合のベストプラクティスは何ですか？どちらがパフォーマンスが優れていますか？

javascriptreactjsdomreact-dom
16
Danielo515

ドキュメントを参照する場合（ https://facebook.github.io/react/docs/react-dom.html#finddomnode ）、findDOMNodeはより多くのトリックのようです実際のオプション。 refが最適なオプションのようです。 doc は、ここで指定したのと同じドラフトを実装します（ref={(n) => this.node = n}を使用）

9
soywod