Wciąż jestem całkiem nowy w React, ale powoli się ścigałem i napotkałem coś, na czym utknąłem.
Próbuję zbudować komponent „timera” w Reakcie i szczerze mówiąc nie wiem, czy robię to dobrze (czy wydajnie). W moim kodu poniżej, ustawić stan powrócić obiektu { currentCount: 10 }
i zostały bawiąc componentDidMount
, componentWillUnmount
i render
i mogę się tylko do stanu „odliczać” od 10 do 9.
Pytanie dwuczęściowe: Co się mylę? I czy istnieje bardziej efektywny sposób korzystania z setTimeout (zamiast używania componentDidMount
& componentWillUnmount
)?
Z góry dziękuję.
import React from 'react';
var Clock = React.createClass({
getInitialState: function() {
return { currentCount: 10 };
},
componentDidMount: function() {
this.countdown = setInterval(this.timer, 1000);
},
componentWillUnmount: function() {
clearInterval(this.countdown);
},
timer: function() {
this.setState({ currentCount: 10 });
},
render: function() {
var displayCount = this.state.currentCount--;
return (
<section>
{displayCount}
</section>
);
}
});
module.exports = Clock;
bind(this)
nie jest już potrzebne, reaguje teraz samodzielnie.this.timer.bind(this)
uruchomiłem mój, dodając jako ten. Samowyzwalacz nie zadziałałclass Clock extends Component
nie wiąże się automatycznie. Zależy to więc od tego, w jaki sposób tworzysz komponenty, czy potrzebujesz wiązania.Odpowiedzi:
Widzę 4 problemy z Twoim kodem:
setState
metody, aby faktycznie zmienić stanSpróbujmy to naprawić:
Spowodowałoby to zmniejszenie licznika czasu z 10 do -N. Jeśli chcesz, aby licznik czasu spadał do 0, możesz użyć nieco zmodyfikowanej wersji:
źródło
componentDidMount
to właściwe miejsce do wywoływania zdarzeń po stronie klienta, więc użyłbym go do zainicjowania odliczania. O jakiej innej metodzie inicjalizacji myślisz?Zaktualizowano 10-sekundowe odliczanie za pomocą
class Clock extends Component
źródło
Zaktualizowano 10-sekundowe odliczanie za pomocą hooków (nowa propozycja funkcji, która pozwala ci używać stanu i innych funkcji Reacta bez pisania klasy. Obecnie są one w React 16.7.0-alpha).
źródło
Jeśli ktoś szuka podejścia React Hook do implementacji metody setInterval. Dan Abramov mówił o tym na swoim blogu . Sprawdź to, jeśli chcesz dobrze przeczytać na ten temat, w tym podejście klasowe. Zasadniczo kod jest niestandardowym hookiem, który zmienia funkcję setInterval jako deklaratywną.
Dla wygody zamieszczam również link CodeSandbox: https://codesandbox.io/s/105x531vkq
źródło
Dzięki @dotnetom, @ greg-herbowicz
Jeśli zwróci "this.state is undefined" - powiąż funkcję timera:
źródło
Aktualizowanie stanu co sekundę w klasie reagowania. Zauważ, że mój index.js przekazuje funkcję, która zwraca bieżący czas.
źródło