Angular转React开发者提问：React是否有等效于DatePipe的工具？

作为有Angular开发背景转React的开发者，我完全懂你想要找一个和DatePipe功能对等工具的需求——毕竟格式化日期在前端开发里太常见了。下面给你几个实用的方案，覆盖不同场景：

1. 用原生JavaScript的Intl.DateTimeFormat（零依赖） #

如果你不想引入额外库，浏览器内置的Intl.DateTimeFormat就是绝佳选择，它支持本地化、多种日期格式选项，和DatePipe的核心功能一致。

举个简单的封装函数：

const formatDate = (date, options = {}) => {
  // 默认用中文本地化，你可以根据需求改成'en-US'等
  return new Intl.DateTimeFormat('zh-CN', options).format(new Date(date));
};

// 调用示例：格式化成年月日全称
console.log(formatDate(new Date(), { 
  year: 'numeric', 
  month: 'long', 
  day: 'numeric' 
}));
// 输出：2024年6月15日

你可以通过调整options参数实现不同格式，比如只显示时分秒、相对时间（相对时间需要用Intl.RelativeTimeFormat），完全能满足日常大部分需求。

2. 第三方日期库（功能更丰富） #

如果需要更复杂的日期操作（比如计算两个日期差、解析非标准日期字符串等），推荐用现代的日期库，比如date-fns（体积小、支持树摇）或者luxon（Moment.js的继任者）。

以date-fns为例：
首先安装依赖：

npm install date-fns

然后在代码中使用：

import { format } from 'date-fns';
import { zhCN } from 'date-fns/locale';

// 自定义格式
const formattedDate = format(new Date(), 'yyyy年MM月dd日 HH:mm:ss', { locale: zhCN });
console.log(formattedDate); // 2024年06月15日 14:30:00

date-fns的API设计很直观，和Angular DatePipe的使用逻辑类似，而且支持各种本地化配置，功能比原生Intl更全面。

3. 自定义React Hook/组件（复用性拉满） #

如果你想像Angular里用管道那样，在组件中快速复用日期格式化逻辑，可以封装成自定义Hook或者组件：

自定义Hook示例 #

import { useMemo } from 'react';
import { format } from 'date-fns';
import { zhCN } from 'date-fns/locale';

const useDateFormatter = (date, formatStr = 'yyyy-MM-dd', locale = zhCN) => {
  // 用useMemo避免不必要的重渲染
  return useMemo(() => {
    if (!date) return '';
    try {
      return format(new Date(date), formatStr, { locale });
    } catch (err) {
      return '无效日期';
    }
  }, [date, formatStr, locale]);
};

// 在组件中使用
const ProfilePage = () => {
  const joinDate = useDateFormatter('2023-01-15', 'yyyy年MM月dd日');
  return <div>加入时间：{joinDate}</div>;
};

自定义组件示例 #

import { format } from 'date-fns';
import { zhCN } from 'date-fns/locale';

const DatePipe = ({ date, format = 'yyyy-MM-dd', locale = zhCN }) => {
  if (!date) return null;
  try {
    const formattedDate = format(new Date(date), format, { locale });
    return <span>{formattedDate}</span>;
  } catch (err) {
    return <span>无效日期</span>;
  }
};

// 在组件中直接用，和Angular的管道体验类似
const OrderCard = () => {
  return (
    <div>
      下单时间：<DatePipe date={new Date()} format="yyyy年MM月dd日 HH:mm" />
    </div>
  );
};

这样封装后，你在React项目里就能像用Angular DatePipe一样便捷地格式化日期了。

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