Tôi có nên sử dụng ref hoặc findDOMNode để nhận nút phản ứng gốc của một phần tử không?

Question

Tôi đang trên một tình huống mà tôi muốn thực hiện một số tính toán kích thước dom-nút (trên, dưới và các thuộc tính kích thước của nút DOM render)

Những gì tôi đang làm ngay bây giờ, vào phương pháp componentDidUpdate là gọi findDOMNode về điều này:

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

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

Điều này hoạt động tốt nhưng tôi hơi lo lắng về hiệu suất và phản ứng các phương pháp hay nhất. Một số nơi nói về việc sử dụng thuộc tính ref thay vì findDOMNode, nhưng tất cả chúng đều dành cho các phần tử dom con, trong trường hợp của tôi, tôi chỉ muốn nút DOM gốc của thành phần của tôi.

Việc thay thế bằng ref có thể trông như thế này:

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 
} 

Thành thật mà nói, gắn một callback ref đến nút dom gốc của tôi chỉ để có được nó là tài liệu tham khảo không cảm thấy đúng với tôi.

Điều gì được coi là phương pháp hay nhất trong trường hợp này? Cái nào có hiệu suất tốt hơn?

Answer 1

Nếu tôi đề cập đến tài liệu (https://facebook.github.io/react/docs/react-dom.html#finddomnode), findDOMNode có vẻ là một mẹo nhỏ hơn một tùy chọn thực. Các ref dường như là lựa chọn tốt nhất. doc triển khai cùng một bản nháp mà bạn đã cung cấp ở đây (với ref={(n) => this.node = n})