React 中格式化日期的多种方法

在构建 React 应用程序时，开发人员必须找到一种处理日期的方法。

这涉及格式化、解析和操作日期值。很难想到任何不以某种方式涉及日期的 React 应用程序。

编程中日期的问题在于，值并不总是按照你想要的方式格式化或分类。有时日期值可以作为字符串、数组甚至对象使用。

其他时候它们只包括年份，而其他日期值包括从年到毫秒的所有内容。JavaScript 包含 Date 对象来解决这个问题，它提供了一些管理数据的好方法。

但是，它仍然不足以满足更复杂的需求，例如国际化和加/减时间值。

开发人员通过创建大量用于在 JavaScript 中处理日期的库来解决这个问题。即使是最有经验的 Web 开发人员也选择使用外部库直接与 Date API 交互。

这些外部包为格式化、解析和操作日期提供了更简单的 API。它们节省了 JavaScript 开发人员花在管理日期上的精力和时间。

最受欢迎的库是 moment、date-fns 和 luxor，仅举几例。

JavaScript 中的 Date 对象

JavaScript 中的 Date 对象并非完全没用。它为简单的操作提供了一些有用的方法，例如 .getDay()，它返回特定日期值的星期几。

如果你了解每种方法的所有注意事项和复杂细节，那么 Date 对象会很有用。与外部库相比，Date 对象的最大缺点是它是可变的。

此功能可能会导致你的网站出现不一致。例如，很容易意外覆盖可变日期值并最终在不知情的情况下显示错误的日期。

以下是可用于 Date 对象的最有用的方法：

• .toDateString()：将日期值转换为更易读的文字字符串。例如，今天的日期将被格式化为 'Fr Dec 17, 2021' 字符串。
• .getDay()：返回一周中的某一天。如果今天调用，它将返回'Friday'。

阅读官方 MDN 上的文档 以更深入地了解 Date 对象及其所有相关方法。

在 React 中使用 date-fns 库格式化

日期库，例如 moment 或 date-fns，是在 React 中管理日期的最简单的解决方案。

还有 react-moment 库，它提供了一个具有其姊妹库所有功能的 React 组件。这些库是在 React 应用程序中处理日期和时间的绝佳解决方案。

首先，你必须通过在 shell 中输入以下命令来安装 date-fns 软件包：

npm install date-fns

安装后，你可以导入库。

date-fns 包的一大优点是模块化。你不必导入整个包，只需导入你需要的功能。

这是一种非常轻量级的方法，可确保你的应用程序的高性能。以下是如何使用 date-fns 格式化日期的示例：

import "./styles.css";
import {format} from 'date-fns'
export default function App() {
  return (
    <div className="App">
      {format(new Date(), "'We are currently in' MMMM")}
    </div>
  );
}

正如你在 codesandbox 上看到的，最终输出显示为：We are currently in December。

这是对 date-fns 库的实用程序及其格式化功能的简单演示。在这种情况下，我们使用模块化方法并且只导入 format 函数。

然后，我们在 JSX 中调用它，在花括号之间，以便对函数的调用被解释为普通的 JavaScript。花括号还允许我们获取 Date 对象的实例，它是 format() 函数的第一个参数。

在第二个参数中，我们指定了我们想要输出的文本以及我们想要如何格式化它。在这种情况下，我们选择了 MMMM 格式，它返回月份的全名。

我们可以选择 MMM，输出将是 We are current in Dec。这只是这个包的格式化能力的简单演示。

要获得更全面的信息，请查看此文档以了解他们的 format() 函数。

在 React 中使用 date-fns 格式化的优点

该库与其他库相比具有许多优势。我们已经提到了它的模块化方法，这进一步提高了它的速度。

该库提供了一个抽象层来处理 Date 对象，因此它很熟悉并且不会重新发明轮子。它支持许多时区和语言。

date-fns 有一个简单的 API。最重要的是，它带有信息丰富的文档，详细解释了用例。

我们已经证明它与 React 配合得很好。该库还可以与 TypeScript 和 Flow 完美配合。