17.HOC及CRA中装饰器模式

扩展 函数式编程

HOC:高阶组件

--新demo--

封装头部尾部为父组件

1.项目目录

- src
  - layout
    - indexLayout
      - Footers.js  #尾部
      - Headers.js #头部
      - index.js #作为导出组件
  - App.js
  - index.js

2.src/layout/indexLayout/Footers.js

/**
 * 底部
 */
import React, {Component} from 'react';

class Footers extends Component {
    render() {
        return (
            <div>
                &copy;2020 __疯子__demo
            </div>
        );
    }
}

export default Footers;

3.src/layout/indexLayout/Headers.js

/**
 * 头部
 */
import React, {Component} from 'react';

class Headers extends Component {
    render() {
        return (
            <div>
                <a href="/">首页</a>
            </div>
        );
    }
}

export default Headers;

4.src/layout/indexLayout/index.js

import React, {Component} from 'react';
import Headers from './Headers'
import Footers from './Footers'

/**
 * 父组件
 * @param ContentComponent 自定义组件(在此项目中ContentComponent表示中间部分)
 */
const indexLayout=(ContentComponent)=>{
    return class Index extends Component {
        render() {
            return (
                <>
                    <Headers/>
                    <ContentComponent/>
                    <Footers/>
                </>
            );
        }
    }

};

export default indexLayout

5.src/App.js

import React, {Component} from 'react';

import indexLayout from './layout/indexLayout'

class App extends Component {
    render() {
        return (
            <div>
                App
            </div>
        );
    }
}

//在此调用的是indexLayout函数，并把App组件作为参数向下传递
export default indexLayout(App);

6.src/index.js

import React from 'react'
import {render} from 'react-dom'
import App from './App'
render(
    <App/>,
    document.getElementById("root")
);

7.参数传递
7.1.src/index.js

render(
    <App name="张三"/>,       //#update 修改
    document.getElementById("root")
);

7.2.src/App.js

    render() {
        return (
            <div>
                App {this.props.name}     //#update 修改
            </div>
        );
    }

7.3.src/layout/indexLayout/index.js

      render() {
            return (
                <>
                    <Headers/>
                    <ContentComponent {...this.props}/>   //#update 修改
                    <Footers/>
                </>
            );
        }

• 7.3.这个步骤是必须步骤，需要把当前所接收到的props进行解构并向下传递

---

让cra支持@装饰器写法

1.不管你是要配置什么，我们最好的方式是使用creat-app-rewired这个包来对cra创建的项目进行轻微的配置调整
cnpm i -D customize-cra
cnpm i -D react-app-rewired
使用addDecoratorsLegacy(装饰器)需要安装一个插件@babel/plugin-proposal-decorators
cnpm i -D @babel/plugin-proposal-decorators
2.安装好之后，在package.json里把scripts里的react-scripts替换为react-app-rewired

"scripts": {
    "start": "react-app-rewired start",      //#update
    "build": "react-app-rewired build",      //#update
    "test": "react-app-rewired test",        //#update
    "eject": "react-scripts eject"  
},

3.在根目录创建一个config-overrides.js

module.exports=(config)=>{
    //如果没有使用customize-cra就在这里对config进行配置
    return config
}

4.当然如果想要配置更方便，可以再安装customize-cra,然后把config-overrides.js改成这样

// 参考配置连接：https://www.npmjs.com/package/customize-cra
const {override,addDecoratorsLegacy}=require("customize-cra");

module.exports=override(
    addDecoratorsLegacy(),//配置装饰器模式
);

修改src/App.js文件

@indexLayout    //#insert 新增
class App extends Component {
    render() {
        return (
            <div>
                App {this.props.name}
            </div>
        );
    }
}

//在此调用的是indexLayout函数，并把App组件作为参数向下传递
// export default indexLayout(App);    //#remove 删除
export default App;

@indexLayout这种写法以后会经常使用，例如:@withRouter控制路由

vue的生态比较官方化，react的生态比较社区化