React中辅助函数定义位置？如何快速重构重复工具函数？

阿华AIGC实验室

2026-5-14

嘿，我来帮你理清这两个问题～

一、React中辅助函数的定义位置

辅助函数的定义位置主要取决于它的使用范围和职责：

仅当前组件使用：直接定义在组件内部即可，如果这个函数会作为props传递或者依赖组件状态/属性，记得用useCallback包裹来避免不必要的重渲染，比如：

const MyComponent = () => {
  // 仅当前组件用的辅助函数
  const formatText = (text: string) => text.trim().toUpperCase();
  
  // 依赖props的函数，用useCallback优化
  const handleButtonClick = useCallback(() => {
    console.log('Clicked with prop:', props.id);
  }, [props.id]);
  
  return <div>{formatText(props.content)}</div>;
};

同文件夹/同模块内多个组件使用：可以在当前模块下创建一个单独的工具文件，比如utils.ts，把函数放在里面导出，这样同模块的组件都能导入使用。
全局多个模块/组件使用：建议在项目根目录的src下创建专门的工具目录，比如src/utils或者src/common，把通用的辅助函数按功能分类存放（比如数字处理、字符串处理、日期处理等），这样整个项目都能方便复用。

二、重构重复的基础辅助函数

像你提到的percentageWithCommas这种多个组件都用到的纯工具函数，完全可以抽成全局通用的工具函数，步骤很简单：

创建通用工具文件
在src/utils下新建numberUtils.ts（按功能分类，方便后续维护），把函数移进去并完善TypeScript类型：

export function percentageWithCommas(x?: number): string {
  // 处理x为undefined或null的情况，避免NaN
  if (x == null) return '0.00%';
  
  try {
    return (x * 100).toLocaleString("en-UK", { maximumFractionDigits: 1 }) + '%';
  } catch (e) {
    return (x * 100).toFixed(2) + '%';
  }
}

在组件中导入使用
不管是myView1/components/fileA.tsx还是myView2/components/fileB.tsx，只要导入这个函数就能直接用：

// 如果没有配置路径别名，用相对路径
import { percentageWithCommas } from '../../../../utils/numberUtils';

// 要是在tsconfig.json里配置了路径别名（比如@指向src），可以更简洁：
// import { percentageWithCommas } from '@/utils/numberUtils';

const FileA = () => {
  const value = 0.123;
  return <div>{percentageWithCommas(value)}</div>;
};