How to show time and date in realtime in React JS?

在 ReactJS 中实时显示时间和日期，你可以创建一个组件，该组件使用 state 来存储当前的日期和时间，并使用 setInterval 方法定时更新这个状态。下面是一个如何创建这样的组件的基本示例：

jsx
import React, { useState, useEffect } from 'react';

// 创建一个Functional组件
const DateTimeDisplay = () => {
  // 使用useState Hook来初始化状态
  const [currentDateTime, setCurrentDateTime] = useState(new Date());

  useEffect(() => {
    // 创建一个定时器，每秒更新一次当前时间
    const timer = setInterval(() => {
      setCurrentDateTime(new Date());
    }, 1000);

    // 组件卸载时清除定时器
    return () => {
      clearInterval(timer);
    };
  }, []);

  // 格式化日期和时间
  const formatDate = (date) => {
    // 可以根据需要调整格式
    return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
  };

  return (
    <div>
      <p>当前日期和时间：</p>
      <p>{formatDate(currentDateTime)}</p>
    </div>
  );
};

export default DateTimeDisplay;

在上面的代码中，DateTimeDisplay 组件完成以下几件事情：

1. 使用 useState 定义一个名为 currentDateTime 的状态变量，它初始值设为一个 Date 对象，代表组件首次渲染时的日期和时间。

2. 通过 useEffect Hook 创建一个副作用，该副作用在组件渲染后执行。在这个副作用内部，我们使用 setInterval 设置一个每秒调用一次的定时器，以更新 currentDateTime 状态。

3. 在 useEffect 的返回函数里，我们设置了一个清除函数，该函数会在组件卸载之前执行，用来清除我们之前设置的定时器。这是防止内存泄漏的重要步骤。

4. formatDate 函数接受一个 Date 对象作为参数，并返回一个格式化的字符串，显示日期和时间。你可以自定义这个函数以符合你的格式要求。

5. 最后，组件返回一个包含当前日期和时间的 JSX 元素，每当 currentDateTime 状态变化时（也就是每秒一次），组件都会重新渲染，显示最新的时间。