条件渲染之react高阶组件——HOC

定义：它接受任何输入（多数时候是一个组件）并返回一个组件作为输出。返回的组件是输入组件的增强版本，并且可以在 JSX 中使用。不是react api而是一种设计模式。
作用：强化组件，复用逻辑，提升渲染性能等
使用方法：
创建一个简单的 HOC，它将一个组件作为输入并返回一个组件。

//一般用“with”前缀来命名 HOC
function withFoo(Component) {
	return function(props) {
		return ;
	}
}

es6的写法

const withFoo = (Component) => (props) =>

使用场景：当你的组件之间出现重复的模式 / 逻辑的时候。

1. 条件渲染：例：当加载状态 (isLoading) 为 true 时，组件显示 Loading 组件，否则显示输入的组
   件

const Button = ({ onClick, className = '', children }) =>
	
		{children}
	

const Loading = () =>
	
Loading ...
	
//定义hoc
const withLoading = (Component) => ({ isLoading, ...rest }) =>
	isLoading
	? 
	: 
	
//实例化一个hoc
const ButtonWithLoading = withLoading(Button);

//使用hoc：它接isLoading作为附加属性。当 HOC 消费isLoading时，再将所有其他props 传递给 Button 组件。
 this.fetchSearchTopStories(searchKey, page + 1)}>
	More

优点：组件可以专注于它们的主要用途。the List component can focus on rendering the list. It doesn’t have to bother with a loading status. A HOC hides away all the noise from your actual component.

拓展：其他的条件渲染方法

• if/if else ，局限性：不能在 return 语句和 JSX 中使用（自调用函数除外）
• 三元运算符,可以在 JSX 和 return 语句中使用
• 逻辑 && 运算符:当三元运算的一侧返回 null 时使用，可以在 JSX 和 return 语句中使用

2. 解决交叉问题(Cross-Cutting Concerns)

使用高阶组件的注意事项

1. ：高阶组件不应修改输入组件

• 原因：1）输入之间不能脱离增强组件分别重用 2）其他同样修改了类似的高阶组件，第一个高阶组件功能会被覆盖？
• 更好的解决办法：通过将输入组件包裹在容器组件来实现组合
  的组合性，以及提升对 props，state 和视图的可操作性。

2. 不要在render函数中使用高阶组件
   原因：每次render都会实例化一个新的高阶组件，造成性能消耗，而且卸载组件会造成组件状态和其子元素全部丢失。
   应该：在组件定义外应用高阶组件，以便生成的组件只被创建一次。（除非你需要动态的使用高阶组件）
3. 静态方法必须复制
   原因：当你将一个组件应用于高阶组件式，虽然原有的组件被容器组件所包裹，但这新的组件没有之前组件的静态函数
   应该：向容器组件中复制原有的静态方法

参考文献：
react学习之道
https://react.html.cn/docs/higher-order-components.html
https://www.robinwieruch.de/react-higher-order-components/
https://juejin.cn/post/6940422320427106335
https://www.robinwieruch.de/react-hooks-higher-order-components/
https://www.robinwieruch.de/react-useeffect-hook/