Languages
[Edit]
PL

React - jak wy┼Ťwietla─ç aktualny czas z od┼Ťwie┼╝aniem

0 points
Created by:
Nathanial-Donald
314

W tym artykule chcieliby┼Ťmy pokaza─ç, jak wy┼Ťwietli─ç aktualny czas, kt├│ry jest od┼Ťwie┼╝any po ustalonym czasie.

W poniższym przykładzie używamy interwału z hookiem React.useEffect, aby zbudować prosty licznik czasu. 
Nie chcemy niepotrzebnych wywo┼éa┼ä funkcji┬áuseEffect, wi─Öc u┼╝yjemy referencji┬ádo funkcji (utworzonej za pomoc─ů React.useRef).

Kiedy setInterval┬áwykona jakie┼Ť operacje, za ka┼╝dym razem wywo┼éa funkcj─Ö przypisan─ů do referencji, aktualizuj─ůc┬áwarto┼Ť─ç stanu time.

Funkcja przypisana do reference jest aktualizowana w każdym cyklu renderowania.
Ca┼éy mechanizm zostanie zatrzymany, gdy komponent zostanie zniszczony (wraz z funkcj─ů┬áclearInterval).

Uwaga:

Aby dowiedzieć się więcej o funkcji useCurrentCallback, przejdź do następnej sekcji artykułu.

Uruchamialny przykład:

// ONLINE-RUNNER:browser;

// Note: Uncomment import lines while working with JSX Compiler.
// import React from 'react';
// import ReactDOM from 'react-dom';

const useCurrentCallback = (callback) => {
  const reference = React.useRef();
  reference.current = callback;
  return (...args) => {
    return reference.current?.(...args);
  };
};

const App = () => {
  const [time, setTime] = React.useState(0);
  const currentCallback = useCurrentCallback(() => {
    const date = new Date();
    setTime(date.toISOString());
  });
  React.useEffect(() => {
    const handle = setInterval(currentCallback, 100);
    return () => clearInterval(handle);
  }, []);
  return (
    <div>{time}</div>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root);

useCurrentCallback

Funkcja┬áuseCurrentCallback┬áwykorzystuje hooka┬áReact.useRef, aby zainicjowa─ç reference.current┬áz funkcj─ů┬ácallback, kt├│ra aktualizowanie nasz─ů warto┼Ť─ç time.

useCurrentCallback┬ázwraca funkcj─Ö┬áz nieokre┼Ťlon─ů liczb─ů argument├│w┬á(...args).

Uwaga:
Więcej o formatowaniu daty i godziny przeczytasz tutaj .

ReactJS (PL)

React - jak wy┼Ťwietla─ç aktualny czas z od┼Ťwie┼╝aniem
Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join