Учебники

Реагировать Родной — Государство

Сентябрь 19, 2018

Данные внутри React Components управляются состоянием и реквизитом . В этой главе мы поговорим о состоянии .

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

Состояние изменчиво, в то время как реквизит неизменен. Это означает, что состояние может быть обновлено в будущем, в то время как реквизиты не могут быть обновлены.

Использование 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;

ЗАМЕЧАНИЯ. Во всех главах мы будем использовать синтаксис класса для компонентов с состоянием (контейнер) и синтаксис функции для компонентов без состояния (презентация). Мы узнаем больше о компонентах в следующей главе.

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

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

44
Share: