為什麼在react中，推薦ref使用函數而不是字元串？

歡迎大家對這個問題展開探討。

在官網上，說明了ref中回調函數的執行時刻：

ref中的回調函數會在對應的普通組件（或元素）componentDidMount，ComponentDidUpdate之前，或者componentWillUnmount之後執行，componentWillUnmount之後執行時，callback接收到的參數是null。需要注意的是，ref不能用在無狀態組件中。

<Test ref={(test) => this.test = test}></Test>

這樣用的好處在於，react可以更優雅的完成對組件銷毀時的變數回收，你只要這麼用，react在銷毀組件時，this.test 很方便的就可以被清理變為null。

另一好處：ref是一個回調函數，使得我們能在這個函數中做更多的事情，比如說，我們可以藉助這種函數的機制，讓父組件直接獲取子組件的Dom。而如果你讓ref是一個字元串，實現這個功能是不可能的，代碼如下：

function CustomTextInput(props) { return ( <div> <input ref={props.inputRef} /> </div> );}class Parent extends React.Component { render() { return ( <CustomTextInput inputRef={el => this.inputElement = el} /> ); }}

這種寫法，適合於無狀態組件，也適合普通組件，父組件都可以通過這種寫法，直接通過this.inputElement拿到子組件中的具體Dom元素。而傳統的字元串形式的ref，相對於這種語法，就可以看出不是足夠靈活了。

還有一個要注意點的點是，像上面通過行內函數來寫ref，組件更新的時候，這個函數實際上會執行兩遍，因為函數的引用變了，react要清除掉老的ref，創建一個新的。清除掉老的ref時，給回調傳入的參數是null，新建ref時，傳入的是組件或者Dom的引用。（如果像避免兩次代碼的執行，可以把ref中的回調定義成一個全局函數即可）。

官網上也明確的標明了，未來React中很有可能去除掉對字元串形ref語法的支持，所以建議大家使用ref的時候，都切換成回調函數的寫法吧～