react 高階組件的代理模式

說明

• react 理解裝飾器
• react 寫一個預加載數據的裝飾器
• 看了之前的裝飾器的理解和預加載數據的裝飾器必定有疑問，爲何這麼寫裝飾器。來看看下面的文章描述：

react 高階組件

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

什麼是高階組件？

• 一個高階組件只是一個包裝了另一個組件的 react 組件。
• 一般這是一個函數，本質上是一個類工廠函數(class factoy)

理解一個函數

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

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

• 包裝
  • 一、屬性代理(props proxy): 高階組件操控傳遞給 wrappedComponent 的 props
  • 二、反向代理(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。

未完待續

• 高階組件有不少知識點，後續補上，本次爲了給前面兩篇文章的裝飾器用到的高階組件作解釋。