react进阶---HOC（高阶组件）

概念

1. 是个函数
2. 参数为组件
3. 返回值为新组件的函数
4. 可以链式调用（因为返回的是一个组件，可以作为下一次调用的参数）
5. 可以用装饰器写法

基本使用

import React, {Component} from "react";

// 这里大写开头的Cmp是指function或者class组件
// 要写2个尖头函数，第一个参数是Cmp组件,第二个参数是props
const foo = Cmp => props => {
  return (
    <div className="border">
      <Cmp {...props} />
    </div>
  );
};

function Child(props) {
  return <div>chiild- {props.name}</div>;
}

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

// 装饰器写法
@foo
@foo
class ClassChild extends Component {
  render() {
    return <div>chiild- {this.props.name}</div>;
  }
}

export default class HocPage extends Component {
  render() {
    return (
      <div>
        <h3>HocPage</h3>
        <Foo name="Foo" />
        <ClassChild name="Foo2" />
      </div>
    );
  }
}

注意事项

1. 不要在 render 方法中使用 HOC

 
render() {
// 每次调用 render 函数都会创建一个新的 EnhancedComponent 
// EnhancedComponent1 !== EnhancedComponent2
const EnhancedComponent = enhance(MyComponent);
// 这将导致子树每次渲染都会进行卸载，和重新挂载的操作! return <EnhancedComponent />;
}