高阶组件

高阶组件（HOC）
定义：高阶组件是参数是组件，返回值也是一个组件的函数。

案例

import React from "react";
// hoc
// 是个函数，参数是组件，返回值也是组件
const foo = (Cmp) => (props) => {
  return (
    <div className="border">
      <Cmp {...props} />
    </div>
  );
};

function Child(props) {
  return <div className="border">child-{props.name}</div>;
}

// 链式调用
const Foo = foo(foo(Child));

export default function HocPage() {
  return (
    <div>
      <h3>hoc page</h3>
      <Foo name="参数"></Foo>
    </div>
  );
}

使用场景

1、input 不想去手动去写 value 和 input 事件时，可以使用高阶组件去封装。利用 React.cloneElement(组件, {value: "", onChange: () => {}})
2、withRouter

注意事项

1、不要再 render 方法中去使用 hoc
因为 render 方法会多次去调用，class 组件每次渲染都会去调 render 方法。这样做不仅性能不好，而且可能会丢失参数