浅谈高阶组件HOC -- Part 2 常见的两种功能增强形式

[lewenweijia]

内容回顾

上一次讲到了高阶组件的基本知识和抽象出来的修饰器模式, 并利用babel实现@操作符的使用,让我们的代码更加富有表现力. 本部分将对笔者目前认识到的两种高阶组件的应用模式进行讲解, 分别是:

• 属性代理
• 反向继承

模式一: 属性代理

属性代理的意思即为, 将原始组件外包一个代理人, 所有要传入原始组件的props都要通过代理人, 代理人完成对原始组件的最终传参数, 在执行过程中代理人可以对传入参数进行过滤, 修改, 验证, 添加等操作. 思考以下代码:

// 普通Hello组件
const Hello = () => (
  <p>Hello</p>
)

// 高阶组件
function WrappedHello(Comp) {
  return class WrapComp extends React.Component {
    render() {
      return (
        <Comp {...this.props} additionProps=1 >
          {children}
        </Comp>
      )
    }
  }
}

// 实现装饰
Hello = WrappedHello(Hello)

wrappedHello返回一个新的组件, 其中实现的代理作用有:

1. 原封不不动将消费者想注入给原始组件的参数全部传入, {...this.props} 来实现
2. addtionPorps=1 高阶组件为Comp额外添加了一个Props
3. {children} 同1, 原封不动将API消费者想嵌入到原始组件Hello中的children全部传入

使用装饰器@操作符号改写上面的代码

利用装饰器@操作符不需要改变WrappedHello, 而是在Hello的定义出实现逻辑包裹, 返回一样面目的全新包裹组件对象(同一变量引用), 改写如下

@WrappedHello
class Hello extends Component {
  render() {
    return <p>Hello</p>
  }
}

利用语法糖的威力可以让我们的想法, 或者应用的模式更加清晰了当

模式二: 反向继承

这种模式是通过让高阶组件生成的新组件组件对传入组件进行继承, 形成继承关系

function WrapperHello(Comp) {
  class WrapComp extends Comp {
    componentDidMount() {
      console.log("say hello in life cycle")
    }
    render() {
      return <Comp></Comp>
    }
  }
}

这种模式比属性代理的模式更有趣的是, 可以修改组件的生命周期.

总结

高阶组件HOC的作用主要是实现代码复用和逻辑抽象. 本文只是对笔者认识到的两种高阶组件模式进行总结, 如果后续有认识错误和新的发现, 会逐渐改善本文的质量(毕竟Github的Issues很好用的, 哈哈:smirk:).