React Native - Eyalet

React bileşenleri, içindeki veriler tarafından yönetilir state ve props. Bu bölümde bahsedeceğizstate.

Durum ve Sahne Arasındaki Fark

state ise değiştirilebilir propsdeğişmez. Bu şu demekstate uygun güncellenemezken gelecekte güncellenebilir.

Eyalet kullanma

Bu bizim kök bileşenimizdir. Sadece ithal ediyoruzHome bölümlerin çoğunda kullanılacak.

App.js

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

export default class App extends React.Component {
   state = {
      myState: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, used do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
      nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
      culpa qui officia deserunt mollit anim id est laborum.'
   }
   render() {
      return (
      <View>
         <Text> {this.state.myState} </Text>
      </View>
      );
   }
}

Emülatör metnini aşağıdaki ekran görüntüsündeki gibi durumdan görebiliriz.

Durum güncelleme

Durum değiştirilebilir olduğundan, onu oluşturarak güncelleyebiliriz. deleteState işlevini kullanarak çağırın ve onPress = {this.deleteText} Etkinlik.

Home.js

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

class Home extends Component {
   state = {
      myState: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
         do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
         ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
         in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
         deserunt mollit anim id est laborum.'
   }
   updateState = () ⇒ this.setState({ myState: 'The state is updated' })
   render() {
      return (
         <View>
            <Text onPress = {this.updateState}>
               {this.state.myState}
            </Text>
         </View>
      );
   }
}
export default Home;

NOTES- Tüm bölümlerde, durum bilgisi olan (kapsayıcı) bileşenler için sınıf sözdizimini ve durum bilgisi olmayan (sunumsal) bileşenler için işlev sözdizimini kullanacağız. Bir sonraki bölümde bileşenler hakkında daha fazla bilgi edineceğiz.

Ayrıca Ev için fonksiyon sözdizimini nasıl kullanacağımızı da öğreneceğiz updateState. Bu sözdiziminin sözcüksel kapsamı kullandığını vethisanahtar kelime ortam nesnesine (Sınıf) bağlanacaktır. Bu bazen beklenmedik davranışlara yol açar.

Yöntemleri tanımlamanın diğer yolu, EC5 işlevlerini kullanmaktır, ancak bu durumda bağlamamız gerekecek thisyapıcıda manuel olarak. Bunu anlamak için aşağıdaki örneği düşünün.

class Home extends Component {
   constructor() {
      super()
      this.updateState = this.updateState.bind(this)
   }
   updateState() {
      //
   }
   render() {
      //
   }
}