17.HOC及CRA中装饰器模式

末蓝、 2023-10-11 16:26 17阅读 0赞

> 扩展 [函数式编程][Link 1]

> 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>
                    ©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的生态比较社区化`

[Link 1]: https://links.jianshu.com/go?to=https%3A%2F%2Fllh911001.gitbooks.io%2Fmostly-adequate-guide-chinese%2Fcontent