react 高階元件的代理模式

Pandaaa發表於2018-07-20
React元件模式

說明

react 高階元件

  • 在目前的前端社群，『推崇組合，不推薦繼承（prefer composition than inheritance）』

什麼是高階元件？

  • 一個高階元件只是一個包裝了另外一個元件的 react 元件。
  • 通常這是一個函式，本質上是一個類工廠函式(class factoy)

理解一個函式

hocFactory:: W: React.Component =>
 E: React.Component複製程式碼

這裡 W（WrappedComponent） 指被包裝的 React.Component，E（Enhanced Component） 指返回的新的高階 React 元件。

  • 包裝
    • 1、屬性代理(props proxy): 高階元件操控傳遞給 wrappedComponent 的 props
    • 2、反向代理(inheritance inversion): 高階元件繼承(extends)

高階元件用在什麼地方？

  • 程式碼複用，邏輯抽象，抽離底層準備（bootstrap）程式碼
  • 渲染劫持
  • State 抽象和更改
  • Props 更改

可用的地方非常多，下面我們先來實現一個高階元件

高階元件的實現

  • 當然其中實現的方法主流的包括我們上面提到的，屬性代理和反向繼承兩種方法。
  • 這兩種方法中又包括了幾種包裝 WrappedComponent 的方法

Props Proxy(屬性代理 PP)

function ppHOC(WrappedComponent) { 
 return class PP extends React.Component { 
   render() { 
     return <
WrappedComponent {...this.props
  }/>
    
  }  
  }
  }複製程式碼

可以看到，這裡高階元件的 render 方法返回了一個 type 為 WrappedComponent 的 React Element（也就是被包裝的那個元件），我們把高階元件收到的 props 傳遞給它，因此得名 Props Proxy。

未完待續

  • 高階元件有很多知識點，後續補上，本次為了給前面兩篇文章的裝飾器用到的高階元件做解釋。

來源：https://juejin.im/post/5b5146596fb9a04fac0d0dc3

相關文章