React高階組件(HOC)入門示例

什麼是高階組件?

簡稱：HOC

全稱：High Order Component

高階組件其實不是什麼高深莫測的東西，它相似於高階函數，就是一個純函數，它會接受一個組件做爲參數，而後返回一個新的組件。

何時使用HOC?

在React中，組件是代碼複用的主要單元。可是業務開發過程當中不免會遇到一些個性化的需求，此時若是再去從新開發一個組件，會讓後續的維護成本變高。

接下來舉一個簡單的例子說明

假設有需求以下

• v1.0：頁面上顯示10行'hello, world!'
• v2.0：頁面上要多加10行‘HELLO,WORLD!'

要實現上述的需求，第一個版本會寫一個顯示hello,world！的組件，這個沒有問題。第二個版本能夠選擇寫一個顯示HELLO,WORLD！的組件，或者在第一個組件的基礎上包裝一下，只給第一個組件返回的數據作一個轉成大寫的處理。

我用HOC的方式寫一下示例代碼，很快就能明白

v1.0的組件示例代碼以下：

class HelloWorld extends React.Component {
  render() {
    return "hello,world!"
  }
}

ReactDOM.render(<HelloWorld />, document.querySelector("#root"))

v2.0的組件示例代碼以下：

// HOC函數，實現v2.0版本的需求
export const toUpperCaseHoc = function(WrappedComponent) {
  return class Hoc extends React.Component {
    render() {
      const { text } = this.props;
      const text2Upper = text.toUpperCase();
      return <WrappedComponent text={text2Upper} />;
    }
  };
};

// v1.0版本實現的組件
export class HelloWorld extends React.Component {
  render() {
    return this.props.text;
  }
}

// 用HOC包裝後生成的新的組件，符合v2.0版本的需求，同時包含了v1.0的其它功能
const HelloWorld2Upper = toUpperCaseHoc(HelloWorld);

ReactDOM.render(<HelloWorld2Upper text="hello,world!" />, document.querySelector('#root'));

總結

業務開發中可能會有一些功能大部分邏輯類似，部分個性化，這個時候能夠考慮一下是否是能夠開發一個基礎組件，在基礎組件的基礎上去增長一些個性化的需求。

最後，一個HOC最好只作一件事。

能夠參考：React官方高階組件相關文檔