React Native - Состояние

Компоненты React управляются данными внутри state и props. В этой главе мы поговорим оstate.

Разница между состоянием и реквизитом

то state изменчив, пока propsнеизменны. Это значит, чтоstate могут быть обновлены в будущем, но не могут быть обновлены.

используя состояние

Это наша корневая составляющая. Мы просто импортируемHome который будет использоваться в большинстве глав.

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>
      );
   }
}

Мы можем видеть текст эмулятора из состояния, как на следующем снимке экрана.

Обновление состояния

Поскольку состояние изменчиво, мы можем обновить его, создав deleteState функцию и вызовите ее с помощью onPress = {this.deleteText} событие.

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- Во всех главах мы будем использовать синтаксис класса для компонентов с состоянием (контейнеров) и синтаксис функций для компонентов без состояния (презентационных). Мы узнаем больше о компонентах в следующей главе.

Мы также узнаем, как использовать синтаксис функции для Home. updateState. Следует иметь в виду, что этот синтаксис использует лексическую область видимости иthisключевое слово будет привязано к объекту среды (классу). Иногда это может привести к неожиданному поведению.

Другой способ определения методов - использовать функции EC5, но в этом случае нам нужно будет привязать thisвручную в конструкторе. Чтобы понять это, рассмотрим следующий пример.

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