React 服务功能组件中的私有方法

Question

我对 React 有点陌生，我目前正在开发一个具有服务层的 Proyect。为此，我创建了一个函数组件，它将方法作为变量：

const CustomComponent = () => {
    
    method1 = () => {...},

    method2 = () => {...},

    method3 = () => {...}

}

export default CustomComponent;

这个组件会被导入到使用它的组件中。

为了使我的架构尽可能干净，我想将一些方法设为私有。但是，您可能已经知道，这在我提出的解决方案中是不可能的。 hoy 对如何实现这一点有任何想法，或者可能有一个约定来制作我不知道的服务层？

非常感谢您！

Answer 1

我发现特别干净和可维护的架构是您将逻辑从表示拆分为两个文件，如下所示：

服务层（ts）：

export class Service implements ServiceInterface {
  constructor(private instanceVariable: string = "foo") { }

  private methodOne(): string {
    return this.instanceVariable
  }

  public methodTwo(argumentVariable: string): string {
    const importantString = this.methodOne();
    
    return importantString + argumentVariable;
  }
}

interface ServiceInterface {
  methodTwo(argumentVariable: string): string;
}

export default new Service();

服务层（js）：

export class Service {
  instanceVariable;
  constructor(contructorArgument) { 
    this.instanceVariable = contructorArgument;
  }

  methodOne() {
    return this.instanceVariable
  }

  methodTwo(argumentVariable) {
    const importantString = this.methodOne();
    
    return importantString + argumentVariable;
  }
}

export default new Service();

表示层：

import Service from "./service.ts";

const FunctionalComponent = () => {
  const [localState, setLocalState] = useState(localStateInit);

  return (
    <>
      <div>{Service.methodTwo("bar")}</div>
    </>
  )
}

这里发生的事情很少（主要是关于 ts 实现）。

1. 将组件的服务层和表示层保存在单独的文件中。
2. 使用接口来描述服务类及其方法。这将有助于在组件中使用服务层，因为您将获得 Typescript 的 IntelliSense。
3. 在本例中，我将服务实例作为默认导出从其文件中导出。这为您在组件文件中提供了一个更清晰的 API，您可以在其中调用方法，而不必通过创建实例来“污染”组件文件。这至少有以下两个缺点：

• 你大多失去了与静态类成员良好合作的能力
• 预配置的实例变量（在构造函数中作为私有成员初始化）意味着它的值在测试中不能被替换。

如果以上任何一个都不行，则清理构造函数，仅导出类本身并在组件文件中根据需要实例化它。

4. 我也在导出类本身。这是出于测试目的。在测试中，您希望能够交换传递给类的构造函数的参数，并且您需要有类定义才能做到这一点。
5. 您会注意到在构造函数中声明和实例化私有类变量的简写符号：private instanceVariable: string = "foo"。这相当于这样：

class Service {
  private instanceVariable: string;

  constructor(constructorArgument: string) { 
    this.instanceVariable = constructorArgument;
  }

这种表示法在与依赖注入一起使用时特别好。

6. 总体而言，此设置将帮助您在服务层中进行单元测试逻辑，因为您可以像测试任何其他类一样对其进行测试。当有很多条件渲染逻辑时，这会特别方便。

如果这是您一直在寻找的，请告诉我。也许我们可以根据您的用例更好地定制它。