React.js dla początkujących - omówienie właściwości i stanu

React.js to jedna z najczęściej używanych bibliotek JavaScript, którą powinien znać każdy programista front-end. Zrozumienie, czym są rekwizyty i stan oraz różnic między nimi, to duży krok w kierunku nauki Reagowania.

W tym wpisie na blogu wyjaśnię, czym są rekwizyty i stan, a także wyjaśnię niektóre z najczęściej zadawanych pytań na ich temat:

  • Co to są rekwizyty?
  • Jak przekazujesz dane za pomocą rekwizytów?
  • Co to jest stan?
  • Jak zaktualizować stan komponentu?
  • Co się dzieje, gdy zmienia się stan?
  • Czy mogę użyć stanu w każdym komponencie?
  • Jakie są różnice między rekwizytami a stanem?
Jeśli jesteś kompletnym początkującym w React, mam serię samouczków na temat React dla początkujących.

Co to są rekwizyty?

Rekwizyty to skrót od właściwości i służą do przekazywania danych między komponentami React. Przepływ danych Reacta między komponentami jest jednokierunkowy (tylko od rodzica do dziecka).

Jak przekazujesz dane za pomocą rekwizytów?

Oto przykład, w jaki sposób dane mogą być przekazywane za pomocą właściwości:

class ParentComponent extends Component { render() { return (  ); } } const ChildComponent = (props) => { return 

{props.name}

; };

Po pierwsze, musimy zdefiniować / pobrać dane z komponentu macierzystego i przypisać je do atrybutu „prop” komponentu potomnego.

„Nazwa” jest tutaj zdefiniowanym rekwizytem i zawiera dane tekstowe. Następnie możemy przekazać dane za pomocą właściwości, tak jak podajemy argument funkcji:

const ChildComponent = (props) => { // statements };

Na koniec używamy notacji kropkowej, aby uzyskać dostęp do danych właściwości i renderować je:

return 

{props.name}

;

Możesz także obejrzeć moje wideo, aby zobaczyć, jak używać rekwizytów:

Co to jest stan?

React ma inny specjalny wbudowany obiekt o nazwie state, który umożliwia komponentom tworzenie własnych danych i zarządzanie nimi. Zatem w przeciwieństwie do właściwości komponenty nie mogą przekazywać danych ze stanem, ale mogą tworzyć i zarządzać nimi wewnętrznie.

Oto przykład pokazujący, jak używać stanu:

class Test extends React.Component { constructor() { this.state = { id: 1, name: "test" }; } render() { return ( 

{this.state.id}

{this.state.name}

); } }

Jak zaktualizować stan komponentu?

Stan nie powinien być modyfikowany bezpośrednio, ale można go modyfikować specjalną metodą o nazwie setState( ).

this.state.id = “2020”; // wrong this.setState({ // correct id: "2020" });

Co się dzieje, gdy zmienia się stan?

OK, dlaczego musimy użyć setState( )? Po co nam w ogóle sam obiekt stanu? Jeśli zadajesz te pytania, nie martw się - wkrótce zrozumiesz stan :) Pozwól, że odpowiem.

Zmiana stanu następuje na podstawie danych wejściowych użytkownika, wyzwolenia zdarzenia i tak dalej. Ponadto komponenty React (ze stanem) są renderowane na podstawie danych w stanie. Stan przechowuje początkowe informacje.

Więc kiedy zmienia się stan, React otrzymuje informację i natychmiast ponownie renderuje DOM - nie cały DOM, ale tylko komponent ze zaktualizowanym stanem. To jeden z powodów, dla których React jest szybki.

W jaki sposób React otrzymuje powiadomienie? Zgadłeś: z setState( ). setState( )Sposób wyzwala proces ponownego renderowania zaktualizowanych części. React otrzymuje informacje, wie, które części zmienić, i robi to szybko bez ponownego renderowania całego DOM.

Podsumowując, istnieją 2 ważne punkty, na które musimy zwrócić uwagę podczas korzystania ze stanu:

  • Stan nie powinien być modyfikowany bezpośrednio - setState( )należy użyć
  • Stan wpływa na wydajność Twojej aplikacji, dlatego nie należy go niepotrzebnie używać

Czy mogę użyć stanu w każdym komponencie?

Innym ważnym pytaniem, które możesz zadać na temat stanu, jest to, gdzie dokładnie możemy go użyć. Na początku stan mógł być używany tylko w komponentach klas , a nie w komponentach funkcjonalnych.

Dlatego komponenty funkcjonalne były również znane jako komponenty bezstanowe. Jednak po wprowadzeniu React Hooks , stan może być teraz używany zarówno w komponentach klasowych, jak i funkcjonalnych.

Jeśli twój projekt nie używa haków React, możesz używać stanu tylko w komponentach klas.

Jakie są różnice między rekwizytami a stanem?

Na koniec podsumujmy i zobaczmy główne różnice między rekwizytami a stanem:

  • Komponenty otrzymują dane z zewnątrz za pomocą rekwizytów, podczas gdy mogą tworzyć własne dane i zarządzać nimi za pomocą stanu
  • Rekwizyty służą do przekazywania danych, a stan służy do zarządzania danymi
  • Dane z rekwizytów są tylko do odczytu i nie mogą być modyfikowane przez komponent, który otrzymuje je z zewnątrz
  • Dane stanu można modyfikować za pomocą własnego komponentu, ale są prywatne (nie można uzyskać do nich dostępu z zewnątrz)
  • Rekwizyty można przekazywać tylko z komponentu nadrzędnego do podrzędnego (przepływ jednokierunkowy)
  • Modyfikacja stanu powinna nastąpić z setState ( )metodą

React.js to obecnie jedna z najczęściej używanych bibliotek JavaScript, którą powinien znać każdy programista front-end.

Mam nadzieję, że ten artykuł pomoże Ci zrozumieć rekwizyty i stan. Są też inne ważne rzeczy do omówienia na temat Reacta, o których będę pisał w dalszej części moich kolejnych artykułów.

Jeśli chcesz dowiedzieć się więcej o tworzeniu stron internetowych, śledź mnie na Youtube !

Dziękuję za przeczytanie!