1.什么是高阶组件

什么是高阶函数？

高阶组件，HOC（High order components）：就是一个函数，接收一个组件，返回一个组件

2.高阶函数

想要了解高级组件，就先看看高阶函数。两者的原理差不多

高阶函数就是接收一个函数返回一个新的函数

没有使用高阶函数时： 重复的代码要重复的调用

function getName(){
  return sessionStorage.getItem("name");
}
export function onHelloWorld() {
  const name = getName()
  //自定义行为
  console.log("你好世界，我是" + name);
}

使用高阶函数：

function onHello(name) {
  console.log("你好世界，我是" + name);
}

 function wrapWithUsername(wrappedFunc) {
   return () => {
     const name = sessionStorage.getItem("name");
     wrappedFunc(name);
   };
 }


export const wrappedHello = wrapWithUsername(onHello);

3.高阶组件

使用高阶组件,接收一个组件返回一个新组件

1.普通模式

普通模式就是函数调用的方式

示例如下：

const wrapWithUsername = (WrapperComponent) => {
  return class extends Component{
    state = {
      name: "",
    };
    componentWillMount() {
      let name = sessionStorage.getItem("name");
      this.setState({ name: name });
    }
    render(){
      return <WrapperComponent name={this.state.name} {...this.props} />;
    }
  };
};

const Hello = (props) => {
  return <div>你好世界，我叫{props.name}</div>;
};
const wrapperHello=wrapWithUsername(Hello)

2.装饰器用法

装饰器只能class类可以使用，装饰器就是用@ 符号

示例如下：

@wrapWithUsername
class Hello extends Component{
  render{
    return <div>你好世界，我叫{this.props.name}</div>;
  }
}

3.多个组件叠加使用

1.装饰器就是直接叠加使用

2.普通方式就是嵌套使用 会发现用普通方式书写的话, 逻辑会显得非常乱, 所以建议使用装饰器的写法

示例如下：

@wrapWithUsername
@wrapWithHeight(180)
class Bye extends Component{
  render() {
    return <div>{this.props.name}</div>;
  }
}

示例如下：

wrapWithUsername(wrapWithHeight(870)(Bye));