定义:参数为组件的函数
功能: 为原始组件注入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 ( <WrappedComponent injectedProp={injectedProp} {...passThroughProps} /> );
}
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 />;
}
会导致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
