2020-04-01
refs轉發
前幾天剛總結完ref&DOM之間的關系，並且想通了3種ref的綁定方式
今天總結一下refs轉發
這是react中一直困擾我的一個點
示例:
輸入: words = ["time", "me", "bell"]
輸出: 10
解釋: S = "time#bell#" ， indexes = [0, 2, 5] 。
用途1: 傳遞refs 到 DOM 組件
在下面的示例中，FancyButton 使用 React.forwardRef 來獲取傳遞給它的 ref，然后轉發到它渲染的 DOM button：
這樣，使用 FancyButton 的組件可以獲取底層 DOM 節點 button 的 ref ，並在必要時訪問，就像其直接使用 DOM button 一樣。
以下是對上述示例發生情況的逐步解釋:
- 我們通過調用 React.createRef 創建了一個 React ref 並將其賦值給 ref 變量。
- 我們通過指定 ref 為 JSX 屬性，將其向下傳遞給 FancyButton ref={ref}
- React 傳遞 ref 給 forwardRef 內函數 (props, ref) => ...，作為其第二個參數。
- 我們向下轉發該 ref 參數到 button ref={ref} ，將其指定為 JSX 屬性。
- 當 ref 掛載完成，ref.current 將指向 button DOM 節點。
用途2: 在高階組件中轉發 refs
我們在使用HOC或者decorator時，得到的組件並不是真正的那個組件而是裝飾過后 被包裹后的組件
不做處理的decorator如下：
使用decorator裝飾 Son組件
所以如果我們直接在組件上寫ref={...} 通過ref得到的是包裹后的新組件 這並不符合我們通常的預期 如下：
當我們使用React.forwardRef處理decorator后，ref指向了Son組件 這是我們通常所希望的
使用React.forwardRef處理decorator如下：
使用修改后的decorator裝飾Son組件
這種情況下 在父組件中給Son綁定的ref={this.son1Ref}的指向是指向Son組件
可見 forwardRef 在 HOC中的作用是很大的。