將 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 庫一樣多的功能。這個庫中的每個函式都有文件記錄。

它們的名稱易於使用，使函式的目的易於理解。