1.2 React Ref API

Ref的功能強大，它能夠讓組件與DOM元素，或類組件與其父級之間建立直接聯系。總體而言，使用Ref出于以下3個目的。

? 訪問DOM元素。

? 訪問組件的實例。

? 將Ref作為mutable數據的存儲中心。

1.創建Ref

創建Ref有兩種方式，分別為useRef和React.createRef。useRef是一種Hooks，只能在函數組件中使用，更多的Hooks在后文介紹。React.createRef的使用位置不限，但不要在函數組件中使用它，如果在函數組件中用它創建Ref，那么函數組件每一次重新渲染都會創建新的Ref。下面的代碼顯示了React.createRef、useRef和Ref的數據類型。

Ref由React.createRef或useRef函數返回，從上述代碼可以看出Ref有兩種數據類型，分別是MutableRefObject和RefObject，這兩種類型都有current字段，類型參數T用于注釋current的類型。下面的代碼演示了如何創建Ref。

2.訪問DOM元素

要想通過Ref訪問DOM元素，必須將Ref綁定到瀏覽器內置的組件上，等組件裝載之后使用ref.current字段訪問DOM元素。下面的代碼演示了如何用Ref訪問input元素使它獲得焦點。

上述代碼用useRef創建Ref，將Ref屬性綁定到input元素上，底層的input元素被賦值給inputRef.current，使用inputRef.current直接操作DOM元素。

3.訪問組件的實例

將Ref屬性綁定到類組件上，通過ref.current能訪問到類組件的實例，由于函數組件沒有實例，所以不能在函數組件上綁定Ref屬性。下面的代碼演示了如何在父組件中通過Ref訪問子組件實例以及調用子組件的方法。

上述代碼通過Ref使RefUse組件與ChildCom組件直接聯系，在RefUse中調用ChildCom的實例方法修改組件的狀態。

注意

上述兩個示例都在函數組件中用useRef創建Ref，在類組件中用React.createRef創建Ref的方法與此相同。

4.將Ref作為mutable數據的存儲中心

將Ref作為mutable數據的存儲中心，使用場景主要是函數組件，這是因為函數組件每一次重新渲染都會執行函數體，使函數體中的各個變量被重新創建。如果函數體中聲明了一些只用于緩存的數據，即不會導致組件重新渲染的變量，那么將這些數據放在Ref中能避免它們被反復創建。將Ref作為mutable數據的存儲中心的示例代碼如下。

將Ref作為mutable數據的存儲中心，不需要將它綁定到React element上，創建之后能直接使用，修改mutableRef.current的值，組件不會重新渲染。

5.總結

Ref的功能很強大，但不要濫用。在這里回顧一下使用Ref的3個目的。

? 訪問DOM元素。請記住，React是基于數據驅動的，也可以理解為是基于狀態驅動的，在React程序中不推薦直接訪問DOM元素。

? 訪問組件實例。通過Ref在父組件中獲得子組件的實例，讓父子組件建立直接聯系，會讓狀態變更變得混亂，父子組件之間的交互應該通過props進行，遵循單向數據流原則。

? 在函數組件中創建Ref，將它作為mutable數據的存儲中心，有它的用武之地，但在類組件中大可不必如此。