React中的getBoundingClientRect

getBoundingClientRect的歸屬

getBoundingClientRect一詞最早來源於IE，是IE的私有屬性，如今已是一個W3C標準。是的，意思就是說原生js中一樣有一個getBoundingClientRect。和react中的同樣？準確來講，react中用到的就是原生js中的getBoundingClientRect。

由於你若是想在react中使用getBoundingClientRect，就必須先獲取到react中的元素的ref，而後ReactDOM.findDOMNode(ref).getBoundingClientRect，ReactDOM固然是須要引入。

ReactDOM.findDOMNode(ref)，就至關於js當中的document.getElementById之類的，它返回的是DOM，因此纔可使用getBoundingClientRect。

若是說getBoundingClientRect是react的內置方法，那麼就能夠直接經過ref.getBoundingClientRect來使用了，可是顯然不能夠的。

什麼是getBoundingClientRect

getBoundingClientRect用於得到頁面中某個元素的左，上，右和下分別相對瀏覽器視窗的位置。getBoundingClientRect是DOM元素到瀏覽器可視範圍的距離（不包含文檔卷起的部分）。

該函數返回一個Object對象，該對象有6個屬性：top,lef,right,bottom,width,height；

這裏的top、left和css中的理解很類似，width、height是元素自身的寬高;

可是right，bottom和css中的理解有點不同。right是指元素右邊界距窗口最左邊的距離，bottom是指元素下邊界距窗口最上面的距離。

getBoundingClientRect的用途

getBoundingClientRect方法經常使用在須要從新定位的場景，好比說用戶引導。在這種需求的時候，不要忘了考慮document.body.scrollTop，有些瀏覽器是document.documentElement.scrollTop

document.body.scrollTop+document.documentElement.scrollTop;

這兩個值總會有一個恆爲0，因此不用擔憂會對真正的scrollTop形成影響。一點小技巧，但很實用。

另外，最好不要使用rem這個單位，由於這個單位在元素的實際加載當中會根據屏幕大小進行必定比例的縮放，可是不少例如getBoundingClientRect此類的方法，返回的都是像素值，這個時候若是你要拿這些值來轉化成rem會比較蛋疼。總之rem並非真實的像素。