React利用HOC制作自己的模块依赖器，自动注入实现privides重写

昨天刚发布了一篇，关于React制作模块化的文章。正在做overwrite的功能的时候，遇到服务注入不太智能。没有@ngModule使用起来方便。

主要我需要在App.tsx需要手动new一下才能进行注入到上下文Application的内容。这个时候我就像能不能制作一个修饰器进行一些自动化配置，看了一些修饰器的实现风法，发现修饰器几乎都是用来修饰class的一时之间不知道如何自动注入服务。

吃了个午饭，看了会子华神的视频后。我突然就就想通了，可以使用React Hoc的特性，制作一个类似@ngModule管理。

现在我们的子模块的入口文件只需要这么做就可以了,主模块的router加载子函数的hoc即可实现一些自动化装配工作。

import React from "react";
import WriteFactory from "./provides/overwrite-factory";
import OverWriteFactory from "./overwrite/overwrite-factory";
import { Application, RcModule } from "core/context";
new WriteFactory();  //这是没有RcModule时候的写法,需要每次都要手动new，而且需要看顺序。现在我们有了RcModule就无需担心这些内容

function OverwriteApp(): JSX.Element {

    const overwrite: any = Application.getInstance().getContainer('writer');

    return (
        <div>
            OverwriteApp {overwrite.getName()}
        </div>
    );

}

export default RcModule({
    privates: [],
    overPrivates: [OverWriteFactory]
}, <OverwriteApp />);

原来的privides

import ProvidesAbstract from "core/context/provides-abstract";

class OverWriter {

    private name: string = "";

    public setName(name: string) {
        this.name = name;
    }
    public getName() {
        return this.name;
    }
}

export default class WriteFactory extends ProvidesAbstract {

    public registered(): void {
        this.app.setContainer('writer', new OverWriter());
    }

}

overwirter privides

import ProvidesAbstract from "core/context/provides-abstract";

class Writer {
    private name: string = "";

    public setName(name: string) {
        this.name = name;
    }
    public getName() {
        return this.name + 1000;
    }
}

export default class OverWriteFactory extends ProvidesAbstract {
    public registered(): void {
        this.app.setContainer('writer', new Writer());
    }
}

这样做法，就是产品部门开发的有代码更新，也不会影响到交付部门的业务逻辑，实现产品的业务迭代更新，也不会影响到多个项目的特有的功能模块代码逻辑影响。好处较少冲突比较。