定义:参数为组件的函数
功能: 为原始组件注入props (变量方法)

定义

const EnhancedComponent = higherOrderComponent(WrappedComponent);

我们平时在react中编写和使用的组件模式:
接收props-> 通过component -> 输出UI
高阶组件的模式:
接收componentA -> 通过HOC(纯函数无副作用) -> 输出新的componentB

HOC 并不是一个新的React Api,而是基于React的组合特性而形成的一种设计模式
具体而言，高阶组件是参数为组件，返回值为新组件的函数

当两个组件业务逻辑一样,渲染的结果数据源不一致,(以前是用mixins),我们需要把业务逻辑抽象,在一个地方定义这个业务逻辑,在各个组件之间共享,这就是高阶组件.

使用原则

1.HOC 不要修改传入的组件, 采用组合的方式

官方文档多次强调: HOC和WrappedComponent的交互仅仅通过props 这样用的好处

1.替换HOC(修改业务逻辑)变得很容易,只需要提供相同的props(更改数据源很容易).

2.对包裹组件类型无要求, 适用于class 组件和函数组件

HOC和包裹组件之间 HOC和HOC 之间都可以任意组合

HOC 在 React 的第三方库中很常见，例如 Redux 的 connect 往组件注入props

HOC 与容器组件模式之间有相似之处。容器组件担任分离将高层和低层关注的责任，由容器管理订阅和状态，并将 prop 传递给处理渲染 UI。HOC 使用容器作为其实现的一部分，你可以将 HOC 视为参数化容器组件

2.尽量提供和包裹组件一样的props

HOC自己的状态不要透传给包裹组件,当我们要替换HOC的时候更加容易

render() {  
// extraProp 为当前HOC状态 不需要透传给WrappedComponent 需要筛选出来 
const { extraProp, ...passThroughProps } = this.props;   
const injectedProp = someStateOrInstanceMethod;   
// 其他 props 全部透传给 WrappedComponent 
return (  ); 
}

3.最大组合性

单参数HOC

const NavbarWithRouter = withRouter(Navbar);

多参数HOC

const CommentWithRelay = Relay.createContainer(Comment, config);

最常见HOC 高阶函数

高阶函数 React Redux 的 connect 函数一个返回高阶组件的高阶函数！

//原始写法 
const ConnectedComment = connect(commentSelector, commentActions)(CommentList);   
// 翻译过来 
// connect 是一个高阶函数，它的返回值为另外一个函数 
const enhance = connect(commentListSelector, commentListActions); 
// 返回值为 HOC，它会返回已经连接 Redux store 的组件 
const ConnectedComment = enhance(CommentList);

connet高阶函数返回一个单参数的高阶组件具有 component -> component特性,输出类型与输入类型相同的函数很容易组合,对于单参数的高阶组件,HOC可以和HOC组合

const EnhancedComponent = withouter(connet(store)(componentA))

组合函数 compose

// 原始写法
const EnhancedComponent = withouter(connet(store)(componentA))  
 // ... 你可以编写组合工具函数 
// compose(f, g, h) 等同于 (...args) => f(g(h(...args))) 
// 把输出型==输入型的函数(HOC)都组合起来 
const enhance = compose([  withouter, connet(store) ])   
const EnhancedComponent = enhance(componentA)

很多库都提供compose 函数 Composes functions from right to left.

右边方法的出参 -> 作为左边方法的入参 (输出类型与输入类型相同)

1.redux compose 专为中间件设计 compose(applyMiddleware(thunk), DevTools.instrument())

2.lodash flow 和 flowright 为方法调用顺序设计

装饰器 Decorators

文档链接: https://www.tslang.cn/docs/handbook/decorators.html

// 也可以再进一步写为装饰器模式 
@withouter @connet(store) componentA

注意事项

不要在 render 方法中使用 HOC

render() {  
// 每次调用 render 函数都会创建一个新的 EnhancedComponent 
// EnhancedComponent1 !== EnhancedComponent2 
const EnhancedComponent = enhance(MyComponent); 
// 这将导致子树每次渲染都会进行卸载，和重新挂载的操作！ 
return ; 
}

会导致EnhancedComponent频繁的挂载,卸载,这不仅仅是性能问题 - 重新挂载组件会导致该组件及其所有子组件的状态丢失。

静态方法记得复制

// 定义静态函数 
WrappedComponent.staticMethod = function() {/*...*/} 
// 现在使用 HOC 
const EnhancedComponent = enhance(WrappedComponent);   
// 增强组件没有 staticMethod 
typeof EnhancedComponent.staticMethod === 'undefined' // true   
// 记得拷贝staticMethod
 Enhance.staticMethod = WrappedComponent.staticMethod;

由于返回的是一个新的组件,包裹组件的静态方法不会被继承,必须要手动拷贝.

Refs 不会被传递

高阶组件约定会报所有的props都传给包裹组件,但是ref不会,ref实际上不是prop-就像 key 一样，它是由 React 专门处理的

高阶组件每次都返回一个新的组件,只能在组件声明式包裹,不利于diff和动态传参,render-props完美的解决了这个问题,直接将一个组件作为props传递进去

这两种方式在react树很大的时候,都会产生回调地狱,所以衍生了 reacthooks

react之高阶组件(HOC Higher-Order Components)

定义