React Native State Nedir? React Native State Nasıl Kullanılır? Ders-3: STATE

React Native'de Component'leri kontrol etmek için iki data tipi vardır : Props ve State. Props ile yapılan değişiklikler, eklemeler component çalıştığı sürece aynı şekilde çalışıyordu. Peki nedir bu State?

Değişikik Olacak: State, Olmayacak: Props!

Evet! State basitçe bu demek. Sonradan oluşturduğumuz data'da bir değişiklik yapcaksak işimiz state düşüyor. 

State'in türkçe manası 'durum' demek. Yani örneğin bir yazının durumuna bakarak üzerinde değişiklik yapıp yapmayacağımızı anlıyoruz... 

-->>Bir text dosyası oluşturduğumuzu düşünün. Text dosyamız sayfamızda görünür iken durumu : Görünür'dür. 1 saniye sonra text dosyamızın 'görünmez' olmasını istiyoruz. Yani bir değişiklik olacak öyleyse ilk önce text dosyamızın durumunun görünür olup olmadığını kontrol eder sonrasında eğer görünür ise state:görünmez deriz ve hallederiz. Bence en basit anlatım bu. Birazcık daha anlamak için aşağıdaki koda bi göz atalım.

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';


class Blink extends Component {
  constructor(props) {
    super(props);

    this.state = { GORUNURLUK: true };


    // 1 saniyede bir çalışan bir fonksiyon
    setInterval(() => (

// setState ile yeni durum oluşturuyoruz.
      this.setState(oncekiState=> (

        { GORUNURLUK: !oncekiState.GORUNURLUK}//Önceki Durumun Tam Tersine ayarlıyoruz. Yani Gorunurluk true ise false olacak.
      ))
    ), 1000);
  }
  render() {
    if (!this.state.GORUNURLUK) {
//Eğer text gorunurluk:false ise yani text görünmüyorsa bir şey yapma.(fonksiyon boş çevirir)
      return null;
    }
//Ama eğer gorunurluk:true ise if içine girme ve aşağıya in. Yani text döndür.

--> eğer state.gorunurluk:true ise aşağıdaki text'i return edecek.

--> eğer state.gorunurluk:false ise hiçbir şey return etmeyecek. yani text görünmeyecek.

--> Bu işlem 1 saniye de bir tersine döndüğü için text 1 saniye de bir görünecek.

    return (
      <Text>{this.props.text}</Text>
    );
  }
}



export default class BlinkApp extends Component {
  render() {
    return (
      <View>
        <Blink text='I love to blink' />
        <Blink text='Yes blinking is so great' />
        <Blink text='Why did they ever take this out of HTML' />
        <Blink text='Look at me look at me look at me' />
      </View>
    );
  }
}

Koddaki olayları yorumlarla açıklamaya çalıştım. Fakat State genelde Text görünür-görünmezliği için kullanılmıyor. Şunlar için birebir:
-->server'dan yeni data çekildiğinde
-->kullanıcı'dan yeni data alındığında