在React中，解耦了對DOM元素的操作，但有時我們確實需要對DOM操作，比如設置元素的滾動條，這時ref就滿足了我們的需求
在低版本的react中，ref可以是一個string類型的屬性，通過this.refs.[refString]來獲取相應的DOM元素，但在高版本的react中已被棄用
在高版本中的ref可以是React.createRef()創建ref屬性 ，也可以是回調函數，我們可以在構造函數中使用React.createRef()來創建一個ref屬性
例如: this.testRef = React.createRef(); // 創建ref屬性
<div ref={this.testRef} /> //將創建的ref屬性作為一個元素的ref
this.testRef.current //獲取元素
ref 的更新會發生在componentDidMount 或 componentDidUpdate 生命周期鈎子之前，所以我們可以在componentDidMount 或 componentDidUpdate中處理業務需求
注意：不能在函數式組件上使用 ref 屬性，因為它們沒有實例，但可以在函數式組件內部使用ref
雖然不能在函數式組件上直接使用ref，但我們可以像組件之間傳遞參數一樣來傳遞ref
例如: render() {
const TestRefFunc = (props) => {
return (
<div ref={props.testRef}>
);
}
return (
<TestRefFunc testRef={(el) => this.testRefEle = el} />
);
}
知道了在react中如何獲取DOM元素，那么就可以對DOM元素操作，設置元素的滾動條，代碼如下
componentDidMount() { // 進入組件
this.testRefEle.current.scrollTop = this.testRefEle.current.scrollHeight;
}
componentUpdateMount() { // 刷新組件
this.testRefEle.current.scrollTop = this.testRefEle.current.scrollHeight;
}