Props ve State Nedir? AR-GE Kulübü - Phoique

Phoique 7

Katılımcı Üye
14 Mar 2017
505
1
Manisa
Merhabalar hepinize, birçok React ve React Native öğrenen kişinin ya bune böyle dercesine bazen baktığı konulardan birisidir. Bu konuda sizlere bu 2 terimi açıklayıp nasıl kullanacağımızı anlatmaya çalışacağım. Ben bu konuda React kullanacağım. Hiç React Native yazmadım ama yazım olarak hiç fark olacağını sanmıyorum. O zaman ilk olarak açıklamak ile başlayalım.

State nedir?

State bulunduğu React componentine özgü değerleri tutmak ile yükümlüdür. Bu tutulan değerler, fonksiyon, string, integer, array, object olabilir.

Props nedir?
Bir componentten diğer componente değer taşımak ile yükümlüdür. Aynı şekilde fonksiyon, string, integer, array, object olabilir bu değer.


Gerçek bir proje üzerinde örnek vermek gerekir ise, A componentiniz olduğunu ve bu componentin görevi api veri çekmek olduğunu farz edelim. Veriyi çektikten sonra bu çekilen veriyi state tutup, başka bir component üzerinde yazdırmak ister veya bu çekilen veriyi başka bir component üzerinde kullanmak isterseniz o componente props yollamanız gerekir.
Birde bunu örnekler ile görelim.


State nasıl kullanılır?

Kod:
[COLOR="DeepSkyBlue"]constructor(props){
    super(props);

    this.state = {
      hello: 'Hello World'
    }
  }[/COLOR]

constructor içinde this.state tanımını yaparak bir object oluşturduk. State bir object içinde tutulur. Hello(key) adında bir state oluşturduk ve bu state değeri Hello World(value) olacağını söyledik. Görüldüğü üzere çok basit bir şekilde state oluşturduk. Şimdi ise bu kullanalım.

Kod:
[COLOR="DeepSkyBlue"]{ this.state.hello }[/COLOR]

this.state kısmı hep sabittir. Bu class içinde hello adında state kullanacağım diyor kodda kısaca. this.state.state_ismi şeklinde kullanılıyor.

EjDQMA.png


Bir yazım şekli daha bulunuyor state ben genelde böyle kullanıyorum. Onuda görün istedim.

Kod:
[COLOR="SeaGreen"]state = {
    hello: (message) => message
  }[/COLOR]

Kod:
[COLOR="seagreen"]{ this.state.hello('Hello') }[/COLOR]

Görüldüğü üzere bu sefer hello adındaki state bir fonksiyon. Girilen message direk return edip gösteriyor. Bu fonksiyon Ecmascript array functions olarak geçmektedir.

State değerini nasıl güncellerim?

Bu kısmını yazmayı unutmuşum son dakika aklıma geldi. oluşturduğunuz bir state değerini güncelleyebilirsiniz. Mesela bir state değeriniz var bu state değerini güncellemek istiyorsunuz bir butona basıldığında değişen text gibi düşünebilirsiniz.

Kod:
[COLOR="seagreen"]this.setState({value: 'Hello'});[/COLOR]

Burada setState fonksiyonu ile value isimli state imizin içereğini Hello yapıyoruz. Şöyle basit bir butona tıklanınca değişen state değeri kodu yazdım.

lhUC3K.png


Props nasıl kullanılır?

2 adet componentimiz olması gerekiyor. Birisi props gönderecek diğeri ise props karşılayacak. Benim ilk componentim App.js ikinci componentim ise Message.js. Burada App üzerinden Message componentime bir props göndereceğim. Bunu Message üzerinde karşılayacağım. Message component yazdığımızı düşünerek devam edelim. App component üzerinde yazdığımız Message component çağıralım.


Kod:
[COLOR="SeaGreen"]App.js
import Message from './Message';[/COLOR]

App componentim ile aynı yerde olduğu için bu şekilde çağırdım ben. Şimdi ise props gönderelim. bu Message componentimize

Kod:
[COLOR="DeepSkyBlue"]App.js
<Message message = 'Text message'/>[/COLOR]

message adında bir props gönderiyoruz ve değeri Text message oluyor. Burada isterseniz state olduğu gibi fonksiyon, array, object, string, integer gibi değerler gönderebilirsiniz. Şimdi ise bu props karşılayalım.
Kod:
[COLOR="SeaGreen"]
Message.js
{ this.props.message }[/COLOR]

Görüldüğü üzere state kullanımına çok benziyor. this.props.props_ismi şeklinde kullanımı vardır. Props Dediğim gibi componentler arası değerler taşır. Bu kodu çalıştırdığımızda göreceksiniz props ekrana yazdırdığımızı. İşi biraz daha ilerletip App componenti üzerinde bir state oluşturalım ve bu state message componentine props olarak gönderelim.


Kod:
[COLOR="SeaGreen"]App.js
state = {
    value: 'state value'
  }
[/COLOR]

Props gönderelim.

Kod:
[COLOR="DeepSkyBlue"]App.js
<Message message = { this.state.value }/>[/COLOR]

Props karşılayalım.

Kod:
[COLOR="SeaGreen"]Message.js
{ this.props.message }[/COLOR]

Görüldüğü üzere App componenti üzerinde oluşturduğumuz state değerini Message componentine props olarak gönderdik.

Genelde bu tarz kullanımlar yukarıda verdiğim örnekte veri yazdırmak için kullanılır. Api veri alındıktan sonra state tutulur. Başka bir component üzerinde bu component kart componenti olduğunu farz edersek gerekli bilgiler kart componentine gönderilir (döngü içinde her bir değer state alınıp props olarak) kullanıcıya gösterilir.

Umarım anlaşılır bir şekilde anlatmışımdır. Aklınıza takılan soruları lütfen sorun. Bu arada gene son dakika aklıma gelen bir bilgi daha. :) İç içe componentler olan bir projede state yönetimi zor olur. Props geçmek istediğinizde bazen 5-6 props geçip öyle ulaştığını düşünseniz ya bu soruna çözüm için redux ve türevleri bir framework çıkarmışlar. Bu da aklınızda bulunsun.
 

Gbmdpof

Kıdemli Üye
23 Eyl 2016
2,001
11
Elinize sağlık. Oldukça güzel olmuş, renklendirme de ilgi çekici olması açısından hoş olmuş.
 

Phoique 7

Katılımcı Üye
14 Mar 2017
505
1
Manisa
Elinize sağlık. Oldukça güzel olmuş, renklendirme de ilgi çekici olması açısından hoş olmuş.

Evet bu sefer bu şekilde renkler de kullandım hem okuyan sıkılmasın aynı rengi görmekten hemde hızlıca bile göz gezdiren kişinin dikkatini çeksin diye.

Teşekkür ederim hepinize.
 

kondanta

Katılımcı Üye
29 Tem 2017
911
0
CNCF
Güzel duruyor, eline sağlık. Redux ve benzeri teknolojilerden de bahsetmen talebiyle.
 
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.