Vue ref vs React refs

Vue 的 ref 屬性的回顧

vue 的 ref 屬性主要用於訪問子組件（vue組件）或者子元素（dom元素），

具體寫法：<base-input ref="usernameInput"></base-input>

獲取實例：this.$refs.usernameInput

如果base-input組件代碼如下：

 

父級組件通過下面的代碼聚焦：this.$refs.usernameInput.focus()

 

注意： 當 ref 和 v-for 一起使用的時候，你得到的 ref 將會是一個包含了對應數據源的這些子組件的數組。

 

React的refs轉發

Ref 轉發是一項將 ref 自動地通過組件傳遞到其一子組件的技巧，說白了就是父組件獲取子組件的dom獲取實例；

通過下面例子說明流程：

 

以下是對上述示例發生情況的逐步解釋：

1. 1. 通過調用 React.createRef 創建了一個 React ref 並將其賦值給 ref 變量。
   2. 指定 ref 為 JSX 屬性，將其向下傳遞給 <FancyButton ref={ref}>。
   3. React 傳遞 ref 給 forwardRef 內函數 (props, ref) => ...，作為其第二個參數。
   4. 我們向下轉發該 ref 參數到 <button ref={ref}>，將其指定為 JSX 屬性。
   5. 當 ref 掛載完成，ref.current 將指向 <button> DOM 節點。

 

高階組件HOC上使用refs轉發

高階組件上使用refs轉發，refs 將不會透傳下去。這是因為 ref 不是 prop 屬性。就像 key 一樣，其被 React 進行了特殊處理。如果你對 HOC 添加 ref，該 ref 將引用最外層的容器組件，而不是被包裹的組件。

可以使用 React.forwardRef API 明確地將 refs 轉發到內部的 FancyButton 組件。React.forwardRef 接受一個渲染函數，其接收 props 和 ref 參數並返回一個 React 節點，下面是例子：

步驟1：高階組件logProps通過屬性的方式傳遞ref:

步驟2：

此時 ref.current 就是指向 目標組件，可以調用focus方法