0%

React 高阶组件

来源于js高阶函数,高阶函数是接受函数作为输入或者输出的函数,(柯里化方法属于高阶函数)
高阶组件接受组件作为参数,并输出新的组件

高阶组件的意义:

  • 属性代理(Props Proxy)
  • 反向继承(Inheritance Inversion)

范式:

  • HOC 使用组合非继承的方式来复制参数组件的行为
  • HOC 通过将原组件包装在容器组件中来组成新组件,而不是修改参数组件
  • HOC 是纯函数,没有副作用
  • HOC 不需要关心数据的使用方式,而包装组件也不需要关心数据的来源;容器组件和包装组件之间的契约完全由 props 来确定
1
2
3
4
5
export const HOC = (OriginComponent) => {
return <>

</>
}