React高阶组件HOC以及cra简单使用

React高阶组件简单说就是用一个函数包着一个react组件，让这些被包着的react组件可以共用这个函数的方法属性。而cra就是个@修饰器，以简化export default a(b(c(d)))这种同时有多个高阶组件的调用，常用:router的@withRouter、react-redux的@connect();

//Hoc.js
import React, {Component} from "react";

const withCopyRight = (MyComponent) => {
   return  class withCopyRight extends Component {
        render() {
			console.log(this.props)//指向子组件的props
            return (
                <>
                    <MyComponent {...this.props}/>//props解构
                    <div>&copy;winson</div>//为每个组件添加版权信息
                </>
            )
        }
    }
}
export default withCopyRight;

//App.js
import React, {Component} from 'react';
import Hoc from './Hoc'
import MyButton from "./MyButton";

//@Hoc 装饰器写法
//最后export default App 等价下面的 export default Hoc(App);
class App extends Component {
    render() {
        return (
            <div className="App">
                <MyButton mes={'this is showing component'}/>//父组件调用以及传参
            </div>
        );
    }
}

export default Hoc(App);

//MyButton.js
import React, {Component} from 'react';
import Hoc from './Hoc'
//@Hoc 装饰器写法
//最后export default MyButton 等价下面的 export default Hoc(MyButton);
class MyButton extends Component {
    render() {
        return (
            <div>
                {this.props.mes}//接收props
            </div>
        );
    }
}

export default Hoc(MyButton);

这样每一个组件都可以有HOC.jsx的版权信息@copyright winson。