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之间随意切换，而不需要改动组件原有代码。