React入門0x018: 高階函數組件(HOC)

0x000 概述

高階函數組件...還是一個函數，和函數組件不同的是他返回了一個完整的組件...他返回了一個class！！！

0x001 直接上栗子

• 照常，先寫個App組件，外部傳入一個theme

  class App extends React.Component {
      render() {
          return (
              <div>
                  App theme: {this.props.theme}
              </div>
          );
      }
  }

• 寫一個函數，傳入一個組件返回新的一個類組件，新的類組件渲染了傳入的組件，並添加theme到傳入的組件中

  const withTheme = (OriginComponent) => {
      return class WrappedComponent extends React.Component {
          render() {
              return (
                  <OriginComponent theme={'dark'}/>
              );
          }
      }
  }

• 調用組件

  let ThemeApp = withTheme(App)

• 渲染

  ReactDom.render(
      <ThemeApp/>,
  document.getElementById('app'))

• 效果
  
• 說明
  這個就是所爲的HOC了，其實也沒有啥，就是傳入一個組件，返回另一個組件，但是這其中的作用可就大多了，返回的新的組件有自己的生命週期，並且可以操控傳入組件的屬性，react-redux的connect實現方式就和這類似。

0x003 總結

其實，這個和React的思想有很大的淵源，React不推薦繼承，而是推薦組合，而HOC就是其中的典範。比如我們寫了兩個個with*高階組件，一個是withRedux，一個是withLocalstorage，組件就可以隨意的在redux和locaostorage之間隨意切換，而不需要改動組件原有代碼。