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

Question

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

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

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

    method3 = () => {...}

}

export default CustomComponent;

此组件将被导入到将使用它的组件中。

为了让我的架构尽可能简洁，我想将一些方法设为私有。但是，正如您可能已经知道的那样，这在我提出的解决方案中是不可能的。霍伊知道如何实现这一点，或者可能有一个我不知道的服务层约定？

在此先感谢您！

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 实现）。

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

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

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

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

class Service {
  private instanceVariable: string;

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

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

总的来说，此设置将帮助您在服务层中进行单元测试逻辑，因为您可以像测试其他任何东西一样测试它 class。当有很多条件渲染逻辑时，这会特别方便。

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

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

Private methods in React service function component

javascript

architecture

service-layer

reactjs