Question

在我的react应用程序中，我想使用一些工具。我见过2种不同的方法。第一个是，仅创建函数并将其导出。第二个是创建一个Util类并导出一个对象，使其无法实例化（静态类）。

class Util {
   redirectIfAuthenticated = (isAuthenticated, history, screen) => {
      if (isAuthenticated) 
         history.push(screen);
   }
}

export default new Util();

VS

export default redirectIfAuthenticated = (isAuthenticated, history, screen) => {
   if (isAuthenticated) 
      history.push(screen);
}

什么是更好的方法？为什么？

Answer 1

由于摇树，通常首选使用单独的功能。

摇树是通过构建工具（例如Webpack）删除未使用的导入以最小化代码的过程。这些工具很难简化类，因此需要考虑。

Answer 2

Singleton类通常被视为反模式。 Util在这种情况下是反模式。一个类用作名称空间，而模块已经在那里提供名称空间。

对多个导出使用默认导出将防止它们摇摇欲坠。

export default redirectIfAuthenticated = ...是一个错误，它导致在松散模式下创建redirectIfAuthenticated全局变量，而在严格模式下出错。

如果仅应进行一次导出，则可以使用默认导出：

export default (isAuthenticated, history, screen) => { ... };

如果有可能存在多个出口（即使当前只有一个出口），则可以使用命名出口：

export const redirectIfAuthenticated = (isAuthenticated, history, screen) => { ... };

Answer 3

您可以同时使用两种方法，但是制作util类并定义所有函数是一种标准的方法。例如：

php artisan migrate:refresh

因此，您可以在此处定义多个函数，并从util类导入这些函数以在任何地方使用。

Answer 4

当类具有彼此紧密耦合的功能时，可以使用它。如果您的utils函数彼此不相关，则可以使用第二种方法。我建议使用第二种方法，因为通常util函数不会相互关联。开发了util函数，以便可以在其他组件中重用。

Answer 5

我认为通常这是人们从其他语言开始转向JavaScript时刚开始工作时遇到的问题。并非所有的东西都需要（或者应该是）一个类，并且当您开始以这种方式进行编码时，将会有更好的时间。

此外，如果您只是想让导入看起来不错，则在进行转译时，通常可以为路径创建别名。

util函数直接导出vs util类

5 个答案: