理解 React 高阶组件

高阶组件是 React 一种复用逻辑的手段。它解决的是这样一类问题，比如有一些组件需要根据登录状态判断是否在页面中显示，直接的做法把这个逻辑判断写在每个组件里面，但如果使用高阶组件则可以复用这些逻辑。

高阶组件概念

高阶组件是一个函数。高阶组件简称 HOC，我有时把它称为 HOC 函数。

高阶组件的参数可以使一个或多个组件，但返回值只能是一个组件。

高阶组件可以组合调用，即组合多个高阶组件为一个高阶组件。

HOC 函数的执行过程

下面是一段简单的 hoc 代码

hoc.js
const withDoNothing = (Component) => {
  return (props) => {
    return <Component {...props} />;
  };
};

index.js
const Index = () => {
  return <Fragment> <h2> hello HOC 01 </h2> </Fragment>;
};

export default WithDoNothing(Index);

demo.js
import HOCDemo1 from "./index";
<Fragment>
  <HOCDemo1 />
</Fragment>

hoc.js 中，第一个return 返回了一个新的组件 A（函数式组件）， 第二个 return 返回了参数中的组件 B。

index.js 中，调用 WithDoNothing(Index) 得到组件 A。

demo.js 中，<HOCDemo1 /> 相当于以 props 为参数调用 A， 返回 B。

可以看出 HOC 实际上调用了 2 次， 所以 hoc 必须要写 2 个 return。一般在第一个 return 的函数里面复用的逻辑。

未完待续。。。。。。