В веб-разработке отображение времени последнего обновления является общим требованием для многих приложений. ReactJS, популярная библиотека JavaScript, предлагает несколько методов динамического обновления времени последнего обновления. В этом сообщении блога мы рассмотрим пять различных подходов, а также примеры кода, которые вы можете использовать для реализации этой функциональности в своих проектах ReactJS.

Метод 1: использование setInterval()

import React, { useState, useEffect } from 'react';
function LastUpdatedTime() {
  const [currentTime, setCurrentTime] = useState(new Date());
  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentTime(new Date());
    }, 1000);
    return () => {
      clearInterval(timer);
    };
  }, []);
  return <p>Last Updated: {currentTime.toString()}</p>;
}
export default LastUpdatedTime;

Метод 2: использование библиотеки Moment.js

import React, { useState, useEffect } from 'react';
import moment from 'moment';
function LastUpdatedTime() {
  const [currentTime, setCurrentTime] = useState(moment());
  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentTime(moment());
    }, 1000);
    return () => {
      clearInterval(timer);
    };
  }, []);
  return <p>Last Updated: {currentTime.format('LLL')}</p>;
}
export default LastUpdatedTime;

Метод 3. Использование библиотеки React Moment

import React, { useState, useEffect } from 'react';
import Moment from 'react-moment';
function LastUpdatedTime() {
  const [currentTime, setCurrentTime] = useState(new Date());
  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentTime(new Date());
    }, 1000);
    return () => {
      clearInterval(timer);
    };
  }, []);
  return (
    <p>
      Last Updated: <Moment format="LLL">{currentTime}</Moment>
    </p>
  );
}
export default LastUpdatedTime;

Метод 4. Использование window.requestAnimationFrame()

import React, { useState, useEffect } from 'react';
function LastUpdatedTime() {
  const [currentTime, setCurrentTime] = useState(new Date());
  useEffect(() => {
    let animationFrameId;
    const updateCurrentTime = () => {
      setCurrentTime(new Date());
      animationFrameId = window.requestAnimationFrame(updateCurrentTime);
    };
    animationFrameId = window.requestAnimationFrame(updateCurrentTime);
    return () => {
      window.cancelAnimationFrame(animationFrameId);
    };
  }, []);
  return <p>Last Updated: {currentTime.toString()}</p>;
}
export default LastUpdatedTime;

Метод 5: использование библиотеки Date-fns

import React, { useState, useEffect } from 'react';
import { format } from 'date-fns';
function LastUpdatedTime() {
  const [currentTime, setCurrentTime] = useState(new Date());
  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentTime(new Date());
    }, 1000);
    return () => {
      clearInterval(timer);
    };
  }, []);
  return (
    <p>
      Last Updated: {format(currentTime, 'MMMM dd, yyyy - HH:mm:ss')}
    </p>
  );
}
export default LastUpdatedTime;

В этой статье мы рассмотрели пять различных методов динамического обновления времени последнего обновления в ReactJS. Каждый метод предлагает свои преимущества и может использоваться в зависимости от требований вашего проекта. Независимо от того, решите ли вы использовать функцию setInterval(), библиотеку Moment.js, библиотеку React Moment, window.requestAnimationFrame() или библиотеку Date-fns, вы легко сможете добиться желаемой функциональности. Поэкспериментируйте с этими методами и выберите тот, который лучше всего соответствует потребностям вашего проекта.