在React/NextJS中，创建工具函数类是否为推荐实践？

在React函数组件为主的项目里，函数式工具方法（拆分到utils文件夹的独立文件）是更符合最佳实践的选择，理由如下：

• 契合React的函数式编程核心
  React从类组件转向函数组件+Hooks，本质是拥抱函数式编程范式。纯函数式的工具方法没有类的实例化、this指向等额外复杂度，和组件的写法风格统一，代码逻辑更直观。比如：

  // utils/formatDate.js
  export const formatDate = (date) => {
    return new Intl.DateTimeFormat('zh-CN').format(new Date(date));
  }
  // 在组件中直接导入使用
  import { formatDate } from '../utils/formatDate';
  

• 按需导入，优化打包体积
  拆分独立文件后，可以精准导入需要的单个工具函数，避免引入整个大类的冗余代码。现代打包工具（Webpack、Vite）的Tree Shaking能更好地识别并移除未使用的代码，有效减小最终打包产物的体积。如果用单一大类，哪怕只用到一个方法，也得导入整个类，容易造成代码冗余。

• 可维护性与复用性更强
  按功能拆分到独立文件（比如validation.js处理表单验证、storage.js处理本地存储），每个文件专注单一职责，查找、修改、扩展都更方便。而且纯函数式工具没有状态依赖，不仅能在React组件中使用，还能在其他工具函数、甚至Node.js环境中复用，适配场景更广。

• 避免无意义的封装
  很多所谓的"Support"类只是把一堆静态方法打包在一起，完全没用到类的核心特性（继承、实例状态），属于过度封装。这种写法除了增加语法开销，没有任何实际收益，反而不如直接暴露函数来得简洁明了。

特殊场景的处理 #

如果确实需要带初始化配置或共享状态的工具，也不用非要用类，可以用闭包或单例函数实现，比如：

// utils/apiClient.js
const createApiClient = (baseUrl) => {
  return {
    get: (path) => fetch(`${baseUrl}${path}`),
    post: (path, data) => fetch(`${baseUrl}${path}`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data)
    })
  };
};

// 初始化一次，全局复用
export const apiClient = createApiClient('https://your-api-domain.com');

综上，你们当前采用的"utils文件夹下独立文件按需调用"的方式完全符合React项目的最佳实践，继续保持即可。

内容的提问来源于stack exchange，提问作者bcaruso.dev