React.Komponent

ta strona zawiera szczegółowe odniesienie API do definicji klasy komponentu Reactowego. Zakłada, że znasz podstawowe pojęcia Reactowe, takie jak komponenty i właściwości, a także stan i cykl życia. Jeśli nie, najpierw przeczytaj.

przegląd

React pozwala definiować komponenty jako klasy lub funkcje. Komponenty zdefiniowane jako klasy zapewniają obecnie więcej funkcji, które są szczegółowo opisane na tej stronie. Aby zdefiniować klasę komponentu Reactowego, należy rozszerzyć React.Component:

class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }}

jedyną metodą, którą musisz zdefiniować w podklasieReact.Component, jestrender(). Wszystkie inne metody opisane na tej stronie są opcjonalne.

zdecydowanie odradzamy tworzenie własnych klas komponentów bazowych. W komponentach Reactowych ponowne użycie kodu odbywa się przede wszystkim poprzez skład, a nie dziedziczenie.

Uwaga:

React nie wymusza użycia składni klasy ES6. Jeśli wolisz tego uniknąć, możesz użyć modułucreate-react-class lub podobnej niestandardowej abstrakcji. Spójrz na używanie Reacta bez ES6, aby dowiedzieć się więcej.

cykl życia komponentu

każdy komponent ma kilka „metod cyklu życia”, które można nadpisać, aby uruchomić kod w określonym czasie w procesie. Możesz użyć tego schematu cyklu życia jako ściągawki. Na poniższej liście powszechnie stosowane metody cyklu życia są oznaczone pogrubioną czcionką. Reszta z nich istnieje dla stosunkowo rzadkich przypadków użycia.

montowanie

te metody są wywoływane w następującej kolejności, gdy instancja komponentu jest tworzona i wstawiana do DOM:

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

uwaga:

te metody są uważane za starsze i należy ich unikać w nowym kodzie:

• UNSAFE_componentWillMount()

aktualizacja

aktualizacja Może być spowodowana zmianami Właściwości lub stanu. Metody te są wywoływane w następującej kolejności podczas ponownego renderowania komponentu:

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• render()

getSnapshotBeforeUpdate()

• componentDidUpdate()

uwaga:

te metody są uważane za starsze i należy ich unikać w nowym kodzie:

• UNSAFE_componentWillUpdate()
• UNSAFE_componentWillReceiveProps()

odmontowanie

ta metoda jest wywoływana, gdy komponent jest usuwany z drzewa DOM:

• componentWillUnmount()

obsługa błędów

te metody są wywoływane, gdy wystąpił błąd podczas renderowania, w metodzie cyklu życia lub w konstruktorze dowolnego komponentu potomnego.

• static getDerivedStateFromError()
• componentDidCatch()

Inne API

każdy komponent zapewnia również inne API:

• setState()
• forceUpdate()

właściwości klasy

• defaultProps
• displayName

właściwości instancji

• props
• state

odniesienie

powszechnie stosowane metody cyklu życia

metody w tej sekcji obejmują obszerne większość przypadków użycia napotkasz na tworzenie komponentów reactowych. Aby uzyskać wizualne odniesienie, sprawdź ten schemat cyklu życia.

render ()

render()

metodarender() jest jedyną wymaganą metodą w komponencie klasy.

Po wywołaniu powinien sprawdzićthis.props Ithis.state I zwrócić jeden z następujących typów:

• elementy Reactowe. Zazwyczaj tworzone przez JSX. Na przykład <div /> I <MyComponent /> są elementami Reactowymi, które instruują Reacta, aby renderował węzeł DOM lub inny komponent zdefiniowany przez użytkownika.
• tablice i fragmenty. Pozwala na zwrócenie wielu elementów z renderowania. Więcej szczegółów można znaleźć w dokumentacji dotyczącej fragmentów.
• portale. Pozwala renderować dzieci w innym poddrzewie DOM. Więcej informacji można znaleźć w dokumentacji na portalach.
• ciąg i liczby. Są one renderowane jako węzły tekstowe w DOM.
• wartości logiczne lubnull. Nic nie Renderuj. (Najczęściej istnieje do obsługi return test && <Child /> wzorzec, gdzie test jest logiczny.)

funkcjarender() powinna być czysta, co oznacza, że nie modyfikuje stanu komponentu, zwraca ten sam wynik za każdym razem, gdy jest wywoływana i nie wchodzi w bezpośrednią interakcję z przeglądarką.

Jeśli Chcesz wejść w interakcję z przeglądarką, wykonaj swoją pracę za pomocą componentDidMount() lub innych metod cyklu życia. Utrzymanierender() pure ułatwia myślenie o komponentach.

Uwaga

render() nie zostanie wywołane, jeślishouldComponentUpdate() zwróci false.

constructor ()

constructor(props)

Jeśli nie inicjalizujesz stanu i nie wiążesz metod, nie musisz implementować konstruktora dla Twojego komponentu Reactowego.

konstruktor komponentu Reactowego jest wywoływany przed jego zamontowaniem. Podczas implementacji konstruktora dla podklasy React.Component, powinieneś wywołać super(props) przed jakimkolwiek innym poleceniem. W przeciwnym raziethis.props będzie niezdefiniowany w konstruktorze, co może prowadzić do błędów.

zazwyczaj konstruktory Reactowe są używane tylko do dwóch celów:

• Inicjalizacja stanu lokalnego poprzez przypisanie obiektu dothis.state.
• powiązanie metod obsługi zdarzeń z instancją.

nie należy wywoływaćsetState() wconstructor(). Zamiast tego, jeśli twój komponent musi używać stanu lokalnego, Przypisz stan początkowy dothis.state bezpośrednio w konstruktorze:

constructor(props) { super(props); // Don't call this.setState() here! this.state = { counter: 0 }; this.handleClick = this.handleClick.bind(this);}

Konstruktor jest jedynym miejscem, w którym powinieneś bezpośrednio przypisaćthis.state. We wszystkich innych metodach należy zamiast tego użyć this.setState().

unikaj wprowadzania jakichkolwiek efektów ubocznych lub subskrypcji w konstruktorze. W takich przypadkach użyj componentDidMount().

Uwaga

unikaj kopiowania właściwości do stanu! Jest to częsty błąd:

constructor(props) { super(props); // Don't do this! this.state = { color: props.color };}

problem polega na tym, że jest on zarówno niepotrzebny (możesz użyćthis.props.color bezpośrednio), jak i tworzy błędy (aktualizacje właściwościcolor nie będą odzwierciedlone w stanie).

używaj tego wzorca tylko wtedy, gdy celowo chcesz ignorować aktualizacje właściwości. W takim przypadku warto zmienić nazwę właściwości na initialColor lub defaultColor. Następnie możesz zmusić komponent do „zresetowania” jego stanu wewnętrznego, zmieniając jego key w razie potrzeby.

przeczytaj nasz wpis na blogu na temat unikania stanu pochodnego, aby dowiedzieć się, co zrobić, jeśli uważasz, że potrzebujesz jakiegoś stanu, aby zależeć od właściwości.

componentDidMount ()

componentDidMount()

componentDidMount() jest wywoływany natychmiast po zamontowaniu komponentu (włożeniu do drzewa). Inicjalizacja, która wymaga węzłów DOM powinna iść tutaj. Jeśli chcesz załadować dane ze zdalnego punktu końcowego, jest to dobre miejsce do utworzenia instancji żądania sieciowego.

ta metoda jest dobrym miejscem do skonfigurowania dowolnych subskrypcji. Jeśli to zrobisz, nie zapomnij zrezygnować z subskrypcji w componentWillUnmount().

możesz wywołaćsetState() natychmiast wcomponentDidMount(). Spowoduje to dodatkowe renderowanie, ale nastąpi to zanim przeglądarka zaktualizuje ekran. Gwarantuje to, że nawet jeśli render() zostanie wywołany dwukrotnie w tym przypadku, Użytkownik nie zobaczy stanu pośredniego. Używaj tego wzorca ostrożnie, ponieważ często powoduje problemy z wydajnością. W większości przypadków powinieneś być w stanie przypisać stan początkowy w constructor(). Może to być jednak konieczne w przypadkach takich jak Modale i podpowiedzi, gdy musisz zmierzyć węzeł DOM przed renderowaniem czegoś, co zależy od jego rozmiaru lub położenia.

funkcja componentDidUpdate ()

componentDidUpdate(prevProps, prevState, snapshot)

componentDidUpdate() jest wywoływana natychmiast po aktualizacji. Ta metoda nie jest wywoływana do początkowego renderowania.

Użyj tego jako okazji do działania na drzewie DOM, gdy komponent został zaktualizowany. Jest to również dobre miejsce do wykonywania żądań sieciowych, o ile porównujesz bieżące właściwości z poprzednimi (np. żądanie sieciowe może nie być konieczne, jeśli właściwości nie uległy zmianie).

componentDidUpdate(prevProps) { // Typical usage (don't forget to compare props): if (this.props.userID !== prevProps.userID) { this.fetchData(this.props.userID); }}

możesz wywołaćsetState() natychmiast wcomponentDidUpdate() ale pamiętaj, że musi być zawinięty w warunek jak w powyższym przykładzie, w przeciwnym razie spowoduje nieskończoną pętlę. Spowoduje to również dodatkowe ponowne renderowanie, które, choć nie jest widoczne dla użytkownika, może wpłynąć na wydajność komponentu. Jeśli próbujesz „skopiować” jakiś stan do właściwości pochodzącej z góry, rozważ użycie zamiast tego właściwości bezpośrednio. Przeczytaj więcej o tym, dlaczego kopiowanie właściwości do stanu powoduje błędy.

Jeśli twój komponent implementujegetSnapshotBeforeUpdate() cykl życia (który jest rzadki), zwracana przez niego wartość zostanie przekazana jako trzeci parametr „snapshot” docomponentDidUpdate(). W przeciwnym razie ten parametr będzie niezdefiniowany.

Notatka

componentDidUpdate() nie zostanie wywołana, jeślishouldComponentUpdate() zwróci false.

componentWillUnmount ()

componentWillUnmount()

componentWillUnmount() jest wywoływany bezpośrednio przed odmontowaniem i zniszczeniem komponentu. Wykonaj wszelkie niezbędne czyszczenie w tej metodzie, takie jak unieważnianie timerów, anulowanie żądań sieciowych lub czyszczenie subskrypcji utworzonych w componentDidMount().

nie powinieneś wywoływaćsetState() wcomponentWillUnmount(), ponieważ komponent nigdy nie zostanie ponownie wyrenderowany. Gdy instancja komponentu zostanie odmontowana, nigdy nie zostanie ponownie zamontowana.

rzadko stosowane metody cyklu życia

metody w tej sekcji odpowiadają rzadkim przypadkom użycia. Są one przydatne raz na jakiś czas, ale większość twoich komponentów prawdopodobnie nie potrzebuje żadnego z nich. Większość poniższych metod można zobaczyć na tym diagramie cyklu życia, klikając pole wyboru „Pokaż mniej popularne cykle życia” u góry.

shouldComponentUpdate ()

shouldComponentUpdate(nextProps, nextState)

użyj shouldComponentUpdate(), aby poinformować Reacta, czy aktualna zmiana stanu lub właściwości nie wpływają na wyjście komponentu. Domyślnym zachowaniem jest ponowne renderowanie przy każdej zmianie stanu i w zdecydowanej większości przypadków należy polegać na domyślnym zachowaniu.

shouldComponentUpdate() jest wywoływany przed renderowaniem, gdy są odbierane nowe właściwości lub stan. Domyślnie true. Ta metoda nie jest wywoływana do początkowego renderowania lub gdy używana jest forceUpdate().

ta metoda istnieje tylko jako optymalizacja wydajności. Nie polegaj na tym, aby „zapobiec” renderowaniu, ponieważ może to prowadzić do błędów. Rozważ użycie wbudowanego PureComponent zamiast ręcznie zapisywać shouldComponentUpdate()PureComponent przeprowadza płytkie porównanie właściwości i stanu i zmniejsza ryzyko pominięcia niezbędnej aktualizacji.

Jeśli jesteś pewien, że chcesz napisać go ręcznie, możesz porównać this.props z nextProps I this.state z nextState I zwrócić false, aby powiedzieć reactowi, że aktualizacja może zostać pominięta. Zwróć uwagę, że zwrócenie false nie uniemożliwia ponownego renderowania komponentów potomnych po zmianie ich stanu.

nie zalecamy przeprowadzania głębokich kontroli równości lub używaniaJSON.stringify() wshouldComponentUpdate(). Jest to bardzo nieefektywne i zaszkodzi wydajności.

obecnie, jeśli shouldComponentUpdate() zwraca false, to UNSAFE_componentWillUpdate()render() I componentDidUpdate() nie zostanie wywołany. W przyszłości React może traktowaćshouldComponentUpdate() jako podpowiedź, a nie ścisłą dyrektywę, a zwróceniefalse może nadal skutkować ponownym renderowaniem komponentu.

static getDerivedStateFromProps ()

static getDerivedStateFromProps(props, state)

getDerivedStateFromProps jest wywoływana tuż przed wywołaniem metody render, zarówno przy początkowym montowaniu, jak i przy kolejnych aktualizacjach. Powinien zwrócić obiekt, aby zaktualizować stan, lub null, aby nic nie aktualizować.

ta metoda istnieje w rzadkich przypadkach użycia, w których stan zależy od zmian właściwości w czasie. Na przykład, może to być przydatne do implementacji komponentu<Transition>, który porównuje swoje poprzednie i następne dzieci, aby zdecydować, które z nich mają być animowane.

wyprowadzenie stanu prowadzi do gadatliwego kodu i utrudnia myślenie o komponentach.Upewnij się, że znasz prostsze alternatywy:

• Jeśli chcesz wykonać efekt uboczny (na przykład pobieranie danych lub animację) w odpowiedzi na zmianę właściwości, użyj componentDidUpdate cykl życia.
• jeśli chcesz ponownie obliczyć niektóre dane tylko wtedy, gdy zmieni się właściwość, użyj pomocnika memoizacji.
• Jeśli chcesz „zresetować” jakiś stan po zmianie właściwości, rozważ albo stworzenie komponentu w pełni kontrolowanego lub całkowicie niekontrolowanego za pomocąkey.

ta metoda nie ma dostępu do instancji komponentu. Jeśli chcesz, możesz ponownie użyć kodu pomiędzygetDerivedStateFromProps() i innymi metodami klasy poprzez wyodrębnienie czystych funkcji właściwości komponentu i stanu poza definicją klasy.

zauważ, że ta metoda jest uruchamiana przy każdym renderowaniu, niezależnie od przyczyny. Jest to w przeciwieństwie do UNSAFE_componentWillReceiveProps, który jest wywołany tylko wtedy, gdy rodzic powoduje ponowne renderowanie, a nie w wyniku lokalnego setState.

getSnapshotBeforeUpdate ()

getSnapshotBeforeUpdate(prevProps, prevState)

getSnapshotBeforeUpdate() jest wywoływany tuż przed ostatnim renderowanym wyjściem przypisanym np. do drzewa DOM. Umożliwia komponentowi przechwytywanie pewnych informacji z drzewa DOM (np. pozycji przewijania), zanim zostanie potencjalnie zmieniona. Każda wartość zwracana przez ten cykl życia zostanie przekazana jako parametr do componentDidUpdate().

ten przypadek użycia nie jest powszechny, ale może wystąpić w interfejsach użytkownika, takich jak wątek czatu, który musi obsługiwać pozycję przewijania w specjalny sposób.

należy zwrócić wartość migawki (lub null).

na przykład:

class ScrollingList extends React.Component { constructor(props) { super(props); this.listRef = React.createRef(); } getSnapshotBeforeUpdate(prevProps, prevState) { // Are we adding new items to the list? // Capture the scroll position so we can adjust scroll later. if (prevProps.list.length < this.props.list.length) { const list = this.listRef.current; return list.scrollHeight - list.scrollTop; } return null; } componentDidUpdate(prevProps, prevState, snapshot) { // If we have a snapshot value, we've just added new items. // Adjust scroll so these new items don't push the old ones out of view. // (snapshot here is the value returned from getSnapshotBeforeUpdate) if (snapshot !== null) { const list = this.listRef.current; list.scrollTop = list.scrollHeight - snapshot; } } render() { return ( <div ref={this.listRef}>{/* ...contents... */}</div> ); }}

w powyższych przykładach ważne jest przeczytanie właściwościscrollHeight wgetSnapshotBeforeUpdate, ponieważ mogą wystąpić opóźnienia między cyklami życia fazy „renderowania” (jakrender) I „commit” fazy cyklu życia (jakgetSnapshotBeforeUpdate IcomponentDidUpdate).

Granice błędów

Granice błędów to Komponenty Reactowe, które wyłapują błędy JavaScript w dowolnym miejscu drzewa komponentów podrzędnych, rejestrują te błędy i wyświetlają interfejs awaryjny zamiast uszkodzonego drzewa komponentów. Granice błędów wychwytują błędy podczas renderowania, w metodach cyklu życia oraz w konstruktorach całego drzewa pod nimi.

komponent klasy staje się granicą błędu, jeśli definiuje jedną z metod cyklu życiastatic getDerivedStateFromError() lubcomponentDidCatch(). Aktualizacja stanu z tych cykli życia pozwala uchwycić nieobsługiwany błąd JavaScript w poniższym drzewie i wyświetlić interfejs awaryjny.

używaj granic błędów tylko do odzyskiwania z nieoczekiwanych WYJĄTKÓW; nie próbuj ich używać do sterowania przepływem.

Więcej szczegółów można znaleźć w sekcji Obsługa błędów w Reakcie 16.

Uwaga

Granice błędów wychwytują tylko błędy w komponentach znajdujących się pod nimi w drzewie. Granica błędu nie może wychwycić błędu w sobie.

static getDerivedStateFromError ()

static getDerivedStateFromError(error)

ten cykl życia jest wywoływany po wystąpieniu błędu przez potomka component.It otrzymuje błąd, który został wyrzucony jako parametr i powinien zwrócić wartość do stanu aktualizacji.

class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { // Update state so the next render will show the fallback UI. return { hasError: true }; } render() { if (this.state.hasError) { // You can render any custom fallback UI return <h1>Something went wrong.</h1>; } return this.props.children; }}

Uwaga

getDerivedStateFromError() jest wywoływany podczas fazy „renderowania”, więc efekty uboczne nie są dozwolone.W tych przypadkach użyj componentDidCatch().

componentDidCatch ()

componentDidCatch(error, info)

ten cykl życia jest wywoływany po wystąpieniu błędu przez potomka component.It otrzymuje dwa parametry:

1. error – błąd, który został zgłoszony.
2. info – obiekt z kluczemcomponentStack zawierającym informację o tym, który komponent wyrzucił błąd.

componentDidCatch() jest wywoływany podczas fazy” commit”, więc skutki uboczne są permitted.It powinien być używany do takich rzeczy jak rejestrowanie błędów:

class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { // Update state so the next render will show the fallback UI. return { hasError: true }; } componentDidCatch(error, info) { // Example "componentStack": // in ComponentThatThrows (created by App) // in ErrorBoundary (created by App) // in div (created by App) // in App logComponentStackToMyService(info.componentStack); } render() { if (this.state.hasError) { // You can render any custom fallback UI return <h1>Something went wrong.</h1>; } return this.props.children; }}

produkcja i rozwój kompilacji Reacta różnią się nieco sposobem obsługi błędówcomponentDidCatch().

podczas programowania błędy będą bąbelkami dowindow, co oznacza, że każdywindow.onerror lubwindow.addEventListener('error', callback) przechwyci błędy, które zostały przechwycone przezcomponentDidCatch().

podczas produkcji, zamiast tego, błędy nie będą się bąbelkować, co oznacza, że każdy moduł obsługi błędów przodka otrzyma tylko błędy, które nie zostały wyraźnie przechwycone przezcomponentDidCatch().

Uwaga

W przypadku błędu można renderować awaryjny interfejs użytkownika za pomocącomponentDidCatch(), wywołującsetState, ale będzie to przestarzałe w przyszłej wersji.Zamiast tego użyj static getDerivedStateFromError(), aby obsłużyć renderowanie awaryjne.

starsze metody cyklu życia

poniższe metody cyklu życia są oznaczone jako „starsze”. Nadal działają, ale nie zalecamy ich używania w nowym kodzie. Więcej informacji na temat migracji ze starszych metod cyklu życia można znaleźć w tym poście na blogu.

UNSAFE_componentWillMount ()

UNSAFE_componentWillMount()

Uwaga

ten cykl życia został wcześniej nazwanycomponentWillMount. Nazwa ta będzie działać do wersji 17. Użyjrename-unsafe-lifecycles codemod, aby automatycznie zaktualizować komponenty.

UNSAFE_componentWillMount() jest wywoływany tuż przed montażem. Jest wywoływany przed render(), dlatego wywołanie setState() synchronicznie w tej metodzie nie spowoduje dodatkowego renderowania. Ogólnie rzecz biorąc, zalecamy użycieconstructor() zamiast inicjalizacji stanu.

unikaj wprowadzania jakichkolwiek skutków ubocznych lub subskrypcji w tej metodzie. W takich przypadkach użyj componentDidMount().

jest to jedyna metoda cyklu życia wywołana podczas renderowania serwera.

UNSAFE_componentWillReceiveProps ()

UNSAFE_componentWillReceiveProps(nextProps)

Uwaga

ten cykl życia został wcześniej nazwanycomponentWillReceiveProps. Nazwa ta będzie działać do wersji 17. Użyjrename-unsafe-lifecycles codemod, aby automatycznie zaktualizować komponenty.

Uwaga:

używanie tej metody cyklu życia często prowadzi do błędów i niespójności

• Jeśli chcesz wykonać efekt uboczny (na przykład pobieranie danych lub animację) w odpowiedzi na zmianę właściwości, użyj componentDidUpdate cykl życia zamiast.
• jeśli użyłeś componentWillReceiveProps do ponownego obliczenia niektórych danych tylko po zmianie właściwości, użyj pomocnika memoizacji zamiast tego.
• jeśli użyłeścomponentWillReceiveProps, aby „zresetować” jakiś stan po zmianie właściwości, rozważ albo stworzenie komponentu w pełni kontrolowanego lub całkowicie niekontrolowanego za pomocąkey.

w przypadku innych przypadków użycia postępuj zgodnie z zaleceniami w tym poście na blogu dotyczącymi stanu pochodnego.

UNSAFE_componentWillReceiveProps() jest wywoływany zanim zamontowany komponent otrzyma nowe właściwości. Jeśli chcesz zaktualizować stan w odpowiedzi na zmiany właściwości (na przykład, aby go zresetować), możesz porównać this.props I nextProps I wykonać przejścia stanu za pomocą this.setState() w tej metodzie.

zauważ, że jeśli komponent nadrzędny spowoduje ponowne renderowanie twojego komponentu, ta metoda zostanie wywołana nawet jeśli właściwości nie uległy zmianie. Pamiętaj, aby porównać bieżące i następne wartości, jeśli chcesz tylko obsługiwać zmiany.

React nie wywołuje UNSAFE_componentWillReceiveProps() z początkowymi właściwościami podczas montowania. Wywołuje tę metodę tylko wtedy, gdy niektóre właściwości komponentu mogą zostać zaktualizowane. Wywołanie this.setState() generalnie nie uruchamia UNSAFE_componentWillReceiveProps().

UNSAFE_componentWillUpdate ()

UNSAFE_componentWillUpdate(nextProps, nextState)

Uwaga

ten cykl życia został wcześniej nazwanycomponentWillUpdate. Nazwa ta będzie działać do wersji 17. Użyjrename-unsafe-lifecycles codemod, aby automatycznie zaktualizować komponenty.

UNSAFE_componentWillUpdate() jest wywoływany tuż przed renderowaniem, gdy są odbierane nowe właściwości lub stan. Wykorzystaj to jako okazję do przeprowadzenia przygotowań przed wystąpieniem aktualizacji. Ta metoda nie jest wywoływana do początkowego renderowania.

zauważ, że nie możesz tutaj wywoływaćthis.setState(); nie powinieneś też robić niczego innego (np. wysyłać akcji Redux), co wywołałoby aktualizację do komponentu Reactowego przed zwrotemUNSAFE_componentWillUpdate().

zazwyczaj tę metodę można zastąpićcomponentDidUpdate(). Jeśli czytałeś z drzewa DOM w tej metodzie (np. aby zapisać pozycję przewijania), możesz przenieść tę logikę do getSnapshotBeforeUpdate().

Uwaga

UNSAFE_componentWillUpdate() nie zostanie wywołane, jeślishouldComponentUpdate() zwróci false.

Inne API

w przeciwieństwie do powyższych metod cyklu życia (które react wywołuje dla Ciebie), poniższe metody są metodami, które możesz wywołać z komponentów.

są tylko dwa z nich:setState() IforceUpdate().

setState ()

setState(updater, )

setState() sprawdza zmiany stanu komponentu i informuje Reacta, że ten komponent i jego potomkowie muszą zostać ponownie wyrenderowane ze zaktualizowanym stanem. Jest to podstawowa metoda aktualizacji interfejsu użytkownika w odpowiedzi na procedury obsługi zdarzeń i odpowiedzi serwera.

pomyśl o setState() jako żądaniu, a nie natychmiastowym poleceniu aktualizacji komponentu. Dla lepszej postrzeganej wydajności, React może ją opóźnić, a następnie zaktualizować kilka komponentów w jednym przejściu. React nie gwarantuje natychmiastowego zastosowania zmian stanu.

setState() nie zawsze od razu aktualizuje komponent. Może wsadowo lub odroczyć aktualizację na później. To sprawia, że czytanie this.state zaraz po wywołaniu setState() jest potencjalnym pułapką. Zamiast tego użyjcomponentDidUpdate lubsetState wywołania zwrotnego (setState(updater, callback)), które z nich są gwarantowane do uruchomienia po aktualizacji została zastosowana. Jeśli chcesz ustawić stan na podstawie poprzedniego stanu, przeczytaj o argumencieupdater poniżej.

setState() zawsze doprowadzi do ponownego renderowania, chyba żeshouldComponentUpdate() zwrócifalse. Jeśli używane są zmienne obiekty i nie można zaimplementować warunkowej logiki renderowania w shouldComponentUpdate(), wywołanie setState() tylko wtedy, gdy nowy stan różni się od poprzedniego, pozwoli uniknąć niepotrzebnego ponownego renderowania.

pierwszym argumentem jest funkcja updater z podpisem:

(state, props) => stateChange

state jest odniesieniem do stanu komponentu w czasie wprowadzania zmiany. Nie należy go bezpośrednio mutować. Zamiast tego zmiany powinny być reprezentowane przez budowanie nowego obiektu na podstawie danych wejściowych z state I props. Na przykład, załóżmy, że chcemy zwiększyć wartość w stanie o props.step:

this.setState((state, props) => { return {counter: state.counter + props.step};});

zarównostate, jak iprops otrzymane przez funkcję updater są gwarantowane jako aktualne. Wyjście aktualizatora jest płytko scalane z state.

drugi parametrsetState() jest opcjonalną funkcją wywołania zwrotnego, która zostanie wykonana po zakończeniusetState I ponownym wyrenderowaniu komponentu. Generalnie zalecamy użycie componentDidUpdate() dla takiej logiki.

Opcjonalnie można przekazać obiekt jako pierwszy argument do setState() zamiast funkcji:

setState(stateChange)

to wykonuje płytkie scalenie stateChange do nowego stanu, np. w celu dostosowania zakupów ilość pozycji koszyka:

this.setState({quantity: 2})

ta forma setState() jest również asynchroniczna i wiele wywołań w tym samym cyklu może być połączonych ze sobą. Na przykład, jeśli spróbujesz zwiększyć ilość produktu więcej niż jeden raz w tym samym cyklu, spowoduje to równowartość:

Object.assign( previousState, {quantity: state.quantity + 1}, {quantity: state.quantity + 1}, ...)

kolejne wywołania nadpisują wartości z poprzednich wywołań w tym samym cyklu, więc ilość będzie zwiększana tylko raz. Jeśli następny stan zależy od bieżącego stanu, zalecamy użycie funkcji updater, zamiast tego:

this.setState((state) => { return {quantity: state.quantity + 1};});

aby uzyskać więcej szczegółów, zobacz:

• Przewodnik stanu i cyklu życia
• w głębi: kiedy i dlaczego setState() połączenia zestawione?
• w głębi: dlaczegothis.state nie jest natychmiast aktualizowany?

forceUpdate ()

component.forceUpdate(callback)

domyślnie, gdy zmienia się stan lub Właściwości komponentu, komponent ponownie renderuje. Jeśli twoja metodarender() zależy od innych danych, możesz powiedzieć Reactowi, że komponent wymaga ponownego renderowania, wywołującforceUpdate().

wywołanieforceUpdate() spowoduje wywołanierender() na komponencie, pomijającshouldComponentUpdate(). Spowoduje to uruchomienie normalnych metod cyklu życia komponentów potomnych, w tymshouldComponentUpdate() metody każdego potomka. React nadal będzie aktualizował drzewo DOM tylko wtedy, gdy znaczniki się zmienią.

Zwykle powinieneś unikać wszystkich zastosowańforceUpdate() I czytać tylko zthis.props Ithis.state wrender().

właściwości klasy

defaultProps

defaultProps można zdefiniować jako właściwość samej klasy komponentu, aby ustawić domyślne właściwości dla klasy. This is used for undefined props, but not for null props. For example:

class CustomButton extends React.Component { // ...}CustomButton.defaultProps = { color: 'blue'};

If props.color is not provided, it will be set by default to 'blue':

 render() { return <CustomButton /> ; // props.color will be set to blue }

If props.color is set to null, it will remain null:

 render() { return <CustomButton color={null} /> ; // props.color will remain null }

displayName

The displayName string is used in debugging messages. Zazwyczaj nie trzeba go ustawiać jawnie, ponieważ jest on wywnioskowany z nazwy funkcji lub klasy, która definiuje komponent. Jeśli chcesz wyświetlić inną nazwę do celów debugowania lub podczas tworzenia komponentu wyższego rzędu, zobacz Zawijanie nazwy wyświetlanej dla łatwego debugowania, aby uzyskać szczegółowe informacje.

właściwości instancji

właściwości

this.props zawiera właściwości, które zostały zdefiniowane przez wywołanie tego komponentu. Zobacz Komponenty i właściwości, aby zapoznać się z nimi.

w szczególności, this.props.children jest specjalną właściwością, zazwyczaj zdefiniowaną przez znaczniki potomne w wyrażeniu JSX, a nie w samym znaczniku.

stan

stan zawiera dane specyficzne dla tego komponentu, które mogą się zmieniać w czasie. Stan jest zdefiniowany przez użytkownika i powinien być zwykłym obiektem JavaScript.

jeśli jakaś wartość nie jest używana do renderowania lub przepływu danych (na przykład identyfikator timera), nie musisz jej umieszczać w tym stanie. Takie wartości można zdefiniować jako pola instancji komponentu.

Zobacz stan i cykl życia, aby uzyskać więcej informacji na temat stanu.

nigdy nie mutujthis.state bezpośrednio, ponieważ wywołaniesetState() może później zastąpić mutację, którą zrobiłeś. Traktuj this.state tak, jakby był niezmienny.