寫在前面

關於 React 中 ref 屬性的具體官方解釋，可在 React 官網的 Refs & DOM 中檢視。
關於 Refs ，React 官網講解的對於新手來說不太友好，還是自己一字一句解讀後並以程式碼驗證的方式後真正理解的。
首先，Refs 和 ref 是兩個概念，Refs 是 React 提供的可用特定 API 建立的一個物件。該物件的結構如下：

這個物件只有一個屬性就是 current ，那麼這個物件是用來幹嘛的呢？

Refs 允許我們訪問 DOM 節點或在 render 方法中建立的 React 元素。（DOM節點就是指原生DOM元素，在render()方法中建立的 React 元素就是指 React 的類元件元素）

我們可以想象這樣一個需求，兩個兄弟元素，一個是 div ，一個是 button。現在想實現點選 button，改變 div 的背景顏色。在原生的 DOM 技術中，我們可以在 button 的點選函式裡使用 document.querySelector('xxx') 的方式選中 div 節點，然後改變其背景樣式。但是無論是在 Vue 還是 React 這樣的框架中，頁面元素都是動態生成的，無法使用 DOM API 獲取的方式。而且 React 中大部分操作的元素不是 原生DOM元素，而是 React 元素。 那麼如何選擇到某一個 原生DOM元素 或者 React 元素呢？

其實，理論上，我們不需要進行任何的選擇操作，這樣會失去前端框架中元件獨立的概念。一般情況下是通過 元件通訊 的方式進行事件的處理的。上述的情況可以使用 EventBus 的方式進行元件通訊，button 的點選事件中進行自定義事件的觸發，在 div 中進行自定義事件的監聽，讓 button 以事件通知的方式告知 div 讓其改變背景色，而不是在 button 的事件中直接獲取 div 進行操作。

但是 React 為我們提供了直接訪問 DOM元素 和 React 元素的方式，就是通過 Refs。使用的方式很簡單，就是，為想要訪問的元素上新增 ref 屬性，將 Refs 物件附加到 ref 屬性上，那麼此時 Refs 物件的 current 屬性就不再是空，而是對應的 DOM元素 或 React 元素例項了。