React components komponenty props właściwości state stan

React components komponenty props właściwości state stan

 

 

framework JavaScript poswojsku

React components komponenty props właściwości state stan

 

Podstawowym elementem biblioteki React jest komponent (ang. Component). Co to jest komponent React?

Komponent biblioteki react to obiekt Javascript odzwierciedlający węzeł z drzewa DOM. Pracując w React, omijasz drzewo DOM, tworząc wirtualny DOM, którego odzwierciedleniem są komponenty React. Komponent React może zawierać w sobie inne komponenty, które mogą w sobie zawierać kolejne komponenty, itd. Tworzone jest w ten sposób drzewo komponentów. Zwykle jeden komponent odpowiedzialny jest za jedno zadanie. Stworzenie komponentu, umożliwia jego wykorzystanie w przyszłości w innych aplikacjach React. Komponenty to elementy wielokrotnego (a nawet) nieskończonego) użytku w aplikacjach React.

 

Istnieją trzy główne sposoby definiowania komponentów React:

 

* bezstanowe elementy funkcyjne (ang. Stateless function components)

* React.createClass

* React.Component

 

W następnej lekcji omówię każdy z wymienionych sposobów tworzenia komponentów React. Teraz wspomnę jedynie o pierwszym sposobie stworzenia komponentu w React, w nawiązaniu do: props - właściwości i state - stanu.

 

Jak zrobić komponent React – sposób I - bezstanowe elementy funkcyjne

 

Komponent powstaje poprzez wykorzystanie funkcji JavaScript, funkcja js otrzymuje props jako argument:

var ObrazekDoKlikania = function(props) {

 return (

     <a href={props.href}>

         <img src={props.src} />

     </a>

 );

};

ReactDOM.render(

 <ObrazekDoKlikania href="http://poswojsku.pl" src="http://poswojsku.info/sites/default/files/poswojsku-info-madre-jak-sowa-..." />,

 document.getElementById("kontener")

);

 

Jak widać, w React - Komponent umieszczany jest w samozamykającym się znaczniku. Co to jest props w React? Jak każda aplikacja, tak i te tworzone w React, potrzebują modelu danych. W React - komponent zasilamy o model danych korzystając z:

 

props (properties) – właściwości - są niezmienne (ang. immutable) podczas cyklu życia komponentu React

state – stan - jest zmienny (ang. mutable) podczas cyklu życia komponentu React.

 

Każda z w.w. opcji ma swoje właściwość i nie stosuje się ich zamiennie.

W aplikacji stworzonej przy pomocy React, stan to potencjalne miejsce występowania błędów, więc aby ograniczyć prawdopodobieństwo wystąpienia błędów w aplikacji React - dobrą praktyką jest ograniczenie korzystania ze stanu aplikacji do - powiedzmy: właściwego minimum.

W React Props są niezmienne -  nie zmienią się podczas cyklu życia komponentu. To co zrobić, gdy dany komponent chcę wyświetlić z innymi props? Trzeba wywołać go z innymi parametrami z poziomu jego rodzica, gdyż wartość props nie może zmienić się wewnątrz komponentu.

 

Więcej na temat components – komponenty, props – właściwości, state – stan – znajdziesz w kolejnych częściach mojego kursu opisującego bibliotekę React.js.

 

 

Zobacz w bocznym menu podobne poradniki do: React components komponenty props właściwości state stan