将 Moment.js 用于 React 应用程序

1. 什么是 Moment.js
2. 在 React 中如何使用 Moment.js
3. Moment.js 实际示例
4. react-moment 包
5. 其他可行的选择

很难想象任何涉及日期和时间的现代 Web 应用程序。React 应用程序也不例外。

管理日期和时间是在 React 中构建动态应用程序的核心。由于这个事实，JavaScript 包含一个 Date 对象，这对于涉及日期和时间的简单操作很有用。

然而，使用 Date 对象说起来容易做起来难。日期 API 不足以格式化、国际化和一般地操作日期。

出于这个原因，JavaScript 开发人员社区创建了许多日期库来执行一些更高级的操作。这些使我们能够更有效地处理日期，而不会浪费时间和精力。

什么是 Moment.js

它是用于在 JavaScript 中格式化日期的最稳定的库之一。Moment 库主要用于解析和格式化数据值，但它具有许多可能对构建现代应用程序有用的功能。

例如，Moment 也可用于数据验证。它适用于 Node.js 和常规 JavaScript。

它可用于前端应用程序以及服务器端编程。它还与许多流行的 JavaScript 库兼容，包括 React 和 TypeScript。

该库提供了一个围绕 JavaScript 中原生 Date 对象的 API。这样，我们就不必与原始的 Date API 交互或更改它。

Moment 库易于学习，而且还支持多种语言。所以它可以很容易地解决我们的国际化问题。

此时，库处于维护模式。它仍然很稳定，所有方法都按预期工作。

然而，创作者决定停止发布新版本。如果你习惯了 Moment 并想将它用于你的 React 应用程序，你可以自由地这样做。

那些关心他们应用程序的长期未来的人可能想要考虑其他 JavaScript 日期库。

在 React 中如何使用 Moment.js

因为 Moment.js 是一个外部库，我们必须将它安装在我们的项目文件夹中。当我们这样做的时候，我们也可以安装 react-moment 包，我们将在后面讨论。

如果我们的应用需要时区功能，建议同时安装 moment-timezone：

npm install --save moment moment-timezone

一旦我们完成安装包，我们必须导入它们。找到我们打算使用它们的文件并导入它们：

import moment from 'moment'
import Moment from 'react-moment'
import 'moment-timezone'

我们将 Moment 大写，因为它是专门为该库中的日期操作而创建的 React 组件。

Moment.js 实际示例

让我们看一个在 React 中使用 Moment 库的示例。

let momentObject = moment()

在这个例子中，我们返回一个简单的 moment 对象，代表代码的执行时间。Moment 库包括许多其他更有趣的方法。

例如，.add() 方法可以通过添加特定的时间来改变对象。让我们看一个例子：

moment().add(10, 'days')

正如我们所见，.add() 方法的第一个参数指定数量，第二个参数是指定时间段所必需的。我们可以将多个方法链接在一起，例如：

moment().add(10, 'days').add(1, 'months')

此代码将在 moment() 函数返回的日期上再增加一个月。

react-moment 包

react-moment 基于 moment 包，但在组件中提供相同的功能。让我们看一个示例，我们必须将字符串格式化为日期。

import React  from 'react';
import Moment from 'react-moment';

class App extends React.Component {
    render() {
        return (
            <Moment>{'1996-07-21T11:55-5500'}</Moment>
        );
    }
}
export default App

或者，我们可以使用 Moment 组件上的 date 属性来传递字符串。日期甚至不必是字符串 - 它可以是数组、对象或 Date 对象的实例。

Moment 组件提供了一种在 React 应用程序中使用 Moment 库的核心功能的简单方法。该组件接受许多 props，例如：date。format、trim 等等。

有关详细信息，请查看官方文档。

其他可行的选择

Moment 库并不是唯一在 JavaScript 中处理日期的库。date-fns 之类的软件包提供了一个很好的选择。

它具有信息丰富的文档和与 Moment 库一样多的功能。这个库中的每个函数都有文档记录。

它们的名称易于使用，使函数的目的易于理解。