如何在date-fns中编写可复用的日期处理代码？

你当前的代码中，重复执行了new Date(weather.dt * 1000)创建日期对象，两次调用format方法，还重复写了首字母大写的逻辑。可以通过以下几种方式复用这些逻辑：

方式一：提取通用日期对象+复用首字母大写函数 #

先创建一次日期对象避免重复实例化，再把首字母大写的逻辑封装成小函数：

import { Weather } from "./type";
import { format } from "date-fns";
import { pl } from "date-fns/locale";

interface Props {
  weather: Weather;
}

// 复用首字母大写逻辑
const capitalize = (str: string): string => {
  return str.charAt(0).toUpperCase() + str.slice(1);
};

export default function WeatherApp({ weather }: Props): JSX.Element {
  // 只创建一次日期对象
  const timestampDate = new Date(weather.dt * 1000);
  
  const date = format(timestampDate, "LLLL dd, yyyy", { locale: pl });
  const day = format(timestampDate, "eeee", { locale: pl });

  return (
    <div className="container-weather">
      <div className="container-header">
        <h2 className="header">{weather.name}</h2>
      </div>
      <div className="container-data-forecast">
        <p className="data-forecast">
          Day: {capitalize(day)}
        </p>
        <p className="data-forecast">
          {capitalize(date)}
        </p>
      </div>
      <div className="container-data-forecast">
        <p className="data-forecast">
          Temprature: {weather.main.temp.toFixed(2)}°C
        </p>
        <p className="data-forecast">Humidity: {weather.main.humidity}%</p>
      </div>
    </div>
  );
}

方式二：封装日期格式化工具函数，一次性返回所需信息 #

把整个日期处理逻辑封装成函数，传入时间戳后直接返回格式化好的day和date：

import { Weather } from "./type";
import { format } from "date-fns";
import { pl } from "date-fns/locale";

interface Props {
  weather: Weather;
}

// 封装日期处理逻辑，返回格式化后的day和date
const formatWeatherDate = (timestamp: number) => {
  const dateObj = new Date(timestamp * 1000);
  const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
  
  return {
    day: capitalize(format(dateObj, "eeee", { locale: pl })),
    date: capitalize(format(dateObj, "LLLL dd, yyyy", { locale: pl }))
  };
};

export default function WeatherApp({ weather }: Props): JSX.Element {
  // 直接调用工具函数获取day和date
  const { day, date } = formatWeatherDate(weather.dt);

  return (
    <div className="container-weather">
      <div className="container-header">
        <h2 className="header">{weather.name}</h2>
      </div>
      <div className="container-data-forecast">
        <p className="data-forecast">
          Day: {day}
        </p>
        <p className="data-forecast">
          {date}
        </p>
      </div>
      <div className="container-data-forecast">
        <p className="data-forecast">
          Temprature: {weather.main.temp.toFixed(2)}°C
        </p>
        <p className="data-forecast">Humidity: {weather.main.humidity}%</p>
      </div>
    </div>
  );
}

方式三：抽离工具函数到单独文件（进阶复用） #

如果项目中多个组件需要处理相同日期格式，可以把工具函数抽离到单独文件，比如utils/date.ts：

// utils/date.ts
import { format } from "date-fns";
import { pl } from "date-fns/locale";

export const capitalize = (str: string): string => {
  return str.charAt(0).toUpperCase() + str.slice(1);
};

export const formatWeatherDate = (timestamp: number) => {
  const dateObj = new Date(timestamp * 1000);
  
  return {
    day: capitalize(format(dateObj, "eeee", { locale: pl })),
    date: capitalize(format(dateObj, "LLLL dd, yyyy", { locale: pl }))
  };
};

然后在组件中导入使用：

import { Weather } from "./type";
import { formatWeatherDate } from "./utils/date";

interface Props {
  weather: Weather;
}

export default function WeatherApp({ weather }: Props): JSX.Element {
  const { day, date } = formatWeatherDate(weather.dt);

  return (
    <div className="container-weather">
      <div className="container-header">
        <h2 className="header">{weather.name}</h2>
      </div>
      <div className="container-data-forecast">
        <p className="data-forecast">
          Day: {day}
        </p>
        <p className="data-forecast">
          {date}
        </p>
      </div>
      <div className="container-data-forecast">
        <p className="data-forecast">
          Temprature: {weather.main.temp.toFixed(2)}°C
        </p>
        <p className="data-forecast">Humidity: {weather.main.humidity}%</p>
      </div>
    </div>
  );
}

这样既简化了组件代码，也能在其他需要相同日期格式的地方直接复用工具函数。

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