React跨组件共享函数最佳实践咨询：以日期格式化函数为例

先分析你提出的三个方案 #

• 方案1：父组件定义后传递给子组件
  优点是简单直接，适合函数依赖父组件状态的场景（比如格式化规则由父组件控制）。但缺点也明显：如果需要给多层级子组件使用，会出现属性透传（prop drilling），代码冗余且维护麻烦；如果函数是内联定义的，每次父组件渲染都会重新创建该函数，可能触发子组件不必要的重渲染（除非用useCallback包裹）。仅适合子组件层级较浅的场景。

• 方案2：用useState存储格式化函数
  完全不推荐！useState是用来管理状态数据的，不是存储函数的容器。你遇到的渲染bug正是因为这种用法违背了React状态更新的逻辑，子组件无法正确感知函数变化，属于典型的用法错误，直接pass。

• 方案3：独立文件作为全局静态函数使用
  这是最推荐的方案，尤其针对日期格式化这种纯函数（输入相同则输出固定，不依赖外部状态）。
  核心优势：

  • 无组件依赖，任何组件可直接导入使用，彻底避免属性透传；
  • 纯函数不会引发组件不必要的重渲染；
  • 代码复用性强，后续修改格式化规则只需改动这一个文件，统一维护成本低；
  • 符合单一职责原则，工具函数与组件逻辑分离，代码结构更清晰。
    实现示例：

  // dateFormatter.ts
  import { DateTime } from 'luxon'; // 也可使用原生Date API或其他日期库
  
  export const formatDate = (date: DateTime): string => {
    return date.toFormat('YYYY-MM-DD');
  };
  

  组件中调用：

  // tableOne.tsx
  import { formatDate } from './dateFormatter';
  
  const TableOne = () => {
    const [someDate, setSomeDate] = useState(DateTime.now());
    return <div>{formatDate(someDate)}</div>;
  };
  

你遗漏的其他可行方案 #

• 自定义Hook：如果格式化函数需要依赖React上下文（比如用户偏好的日期格式从全局Context获取），可以封装成自定义Hook：

  // useDateFormatter.ts
  import { useContext } from 'react';
  import { AppContext } from './AppContext';
  
  export const useDateFormatter = () => {
    const { dateFormat } = useContext(AppContext); // 从全局Context获取用户配置的格式
    const formatDate = (date: DateTime): string => {
      return date.toFormat(dateFormat || 'YYYY-MM-DD');
    };
    return formatDate;
  };
  

  组件中使用：

  const TableTwo = () => {
    const formatDate = useDateFormatter();
    const [date, setDate] = useState(DateTime.now());
    return <div>{formatDate(date)}</div>;
  };
  

  这种方式适合函数依赖React内部状态/上下文的场景，比属性透传更优雅。

• React Context：如果格式化规则需要全局共享且动态变化（比如用户切换日期格式），可以将格式配置或格式化函数放入Context，让子组件直接消费。但对于固定格式的纯函数，使用Context属于大材小用，不如方案3简洁。

总结 #

• 若为固定格式的纯工具函数，优先选择方案3，这是React中共享工具函数的标准最佳实践；
• 若函数需要依赖全局配置或React上下文，使用自定义Hook或Context；
• 方案1仅适合子组件层级浅、函数依赖父组件状态的场景，记得用useCallback包裹函数避免不必要的重渲染；
• 方案2完全违背React状态管理的设计初衷，直接放弃。

内容的提问来源于stack exchange，提问作者Roy