|
定义：它接受任何输入（多数时候是一个组件）并返回一个组件作为输出。返回的组件是输入组件的增强版本，并且可以在 JSX 中使用。不是react api而是一种设计模式。
作用：强化组件，复用逻辑，提升渲染性能等
创建一个简单的 HOC，它将一个组件作为输入并返回一个组件。
//一般用“with”前缀来命名 HOC
function withFoo(Component) {
return function(props) {
return <Component { ...props } />;
}
}
es6的写法
const withFoo = (Component) => (props) =>
<Component { ...props } />
使用场景：当你的组件之间出现重复的模式 / 逻辑的时候。
- 条件渲染：例：当加载状态 (isLoading) 为 true 时，组件显示 Loading 组件，否则显示输入的组
件
const Button = ({ onClick, className = '', children }) =>
<button
onClick={onClick}
className={className}
type="button"
>
{children}
</button>
const Loading = () =>
<div>Loading ...</div>
//定义hoc
const withLoading = (Component) => ({ isLoading, ...rest }) =>
isLoading
? <Loading />
: <Component { ...rest } />
//实例化一个hoc
const ButtonWithLoading = withLoading(Button);
//使用hoc：它接isLoading作为附加属性。当 HOC 消费isLoading时，再将所有其他props 传递给 Button 组件。
<ButtonWithLoading
isLoading={isLoading}
onClick={() => this.fetchSearchTopStories(searchKey, page + 1)}>
More
</ButtonWithLoading>
- 解决交叉问题(Cross-Cutting Concerns)
使用高阶组件的注意事项
- ：高阶组件不应修改输入组件
- 原因：1）输入之间不能脱离增强组件分别重用 2）其他同样修改了类似的高阶组件，第一个高阶组件功能会被覆盖？
- 更好的解决办法：通过将输入组件包裹在容器组件来实现组合
的组合性，以及提升对 props，state 和视图的可操作性。
- 不要在render函数中使用高阶组件
原因：每次render都会实例化一个新的高阶组件，造成性能消耗，而且卸载组件会造成组件状态和其子元素全部丢失。
应该：在组件定义外应用高阶组件，以便生成的组件只被创建一次。（除非你需要动态的使用高阶组件） - 静态方法必须复制
原因：当你将一个组件应用于高阶组件式，虽然原有的组件被容器组件所包裹，但这新的组件没有之前组件的静态函数
应该：向容器组件中复制原有的静态方法
参考文献：
react学习之道
https://react.html.cn/docs/higher-order-components.html
https://www.robinwieruch.de/react-higher-order-components/
https://juejin.cn/post/6940422320427106335
|