Состояние компонента в React Native

Опубликовано: 14 Июля, 2021

Введение в React Native
Как работает React Native?

Есть два типа данных, которые управляют компонентом:

props: неизменяемы, устанавливаются родителем и фиксируются на протяжении всего жизненного цикла компонента.
состояние: изменчиво. Это означает, что состояние может быть обновлено в будущем, а свойства - нет. мы можем инициализировать состояние в конструкторе, а затем вызвать setState, когда захотим его изменить.

реквизит в / с состояние

Используйте реквизиты для передачи данных и настроек через дерево компонентов.
Никогда не изменяйте this.props внутри компонента; считать реквизит неизменным.
Используйте props, чтобы обработчики событий взаимодействовали с дочерними компонентами.
Используйте состояние для хранения простого состояния просмотра, например, видны ли или нет раскрывающиеся варианты.
Никогда не изменяйте this.state напрямую, используйте вместо него this.setstate.

store: хранилище содержит все дерево состояний приложения. Единственный способ изменить состояние внутри него - это отправить над ним действие. Магазин - это не класс. Это просто объект с несколькими методами, и я расскажу об этом в следующих статьях на React Native.
Более объясненный способ понять разницу между реквизитами, состоянием и хранилищем о том, как и где использовать эти компоненты.

Давайте рассмотрим пример, чтобы узнать больше о состоянии :

Например, предположим, что мы хотим создать текст, который показывает / скрывает пароль из макета TextInput. Параметр «скрыт ли пароль или нет» со временем меняется, поэтому его следует сохранять в состоянии.

 import React, { Component } from 'react' ;
 import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableOpacity
 } from 'react-native' ;
 
export class default GeeksForGeeks extends Component {
 
  state: {
    password: string,
    isPasswordHidden: boolean ,
    toggleText: string,
  }
 
  constructor(props: Props) {
        super (props);
        this .state = {
          password: '' ,
          isPasswordHidden: true ,
          toggleText: 'Show' ,
        };
    }
 
    handleToggle = () => {
    const { isPasswordHidden } = this .state;
 
    if (isPasswordHidden) {
      this .setState({ isPasswordHidden: false });
      this .setState({ toggleText: 'Hide' });
    } else {
      this .setState({ isPasswordHidden: true });
      this .setState({ toggleText: 'Show' });
    }
  };
 
  render() {
    return (
      <View style={styles.container}>
        <TextInput
          secureTextEntry={ this .state.isPasswordHidden}
          style={{ width: 400 , height: 50 , backgroundColor: '#212D3B' , color: 'white' }}
        />
        <TouchableOpacity
          onPress={ this .handleToggle}
        >
          <Text>{ this .state.toggleText}</Text>
        </TouchableOpacity>
      </View>
    );
  }
 }
 
const styles = StyleSheet.create({
  container: {
    flex: 1 ,
    justifyContent: 'center' ,
    alignItems: 'center' ,
  }
 });
 
AppRegistry.registerComponent( 'GeeksForGeeks' , () => GeeksForGeeks); 

Здесь мы инициализировали состояние в конструкторе, а затем вызывали setState, когда хотим его обновить. Фактически мы используем два состояния. Один для обновления логического значения для пароля скрыт или нет, а другой для текстовой строки Показать / Скрыть пароль. После запуска приложения вы увидите что-то вроде этого:

Для полностью рабочего приложения, Оформить заказ по ссылке: Github

Теперь давайте посмотрим на пример, чтобы узнать больше о реквизитах :

 import React, { Component } from 'react' ;
 import {
  AppRegistry,
  Image
 } from 'react-native' ;
 
export class default GeeksForGeeks extends Component {
 
  render() {
    const image = {
      url: ' https://www.appcoda.com/wp-content/uploads/2015/04/react-native.png '
    };
    return (
      <Image source={image} style={{padding: 186 , flex: 1 , alignSelf:
 'center' , justifyContent: 'center' , resizeMode: 'contain' , }}/>
    );
  }
 }
 
AppRegistry.registerComponent( 'GeeksForGeeks' , () => GeeksForGeeks); 

Теперь Здесь мы фактически получаем изображение из URL-адреса и отображаем его в приложении. Если вы заметили, сейчас мы используем только одну ссылку, отображающую изображение. Нет обновлений, сделанных кем-то другим, использующим приложение. Это в основном называется props .

Демо после запуска приложения:

Эта статья предоставлена Сакет Кумар . Если вам нравится GeeksforGeeks, и вы хотели бы внести свой вклад, вы также можете написать статью с помощью provide.geeksforgeeks.org или отправить ее по электронной почте на deposit@geeksforgeeks.org. Посмотрите, как ваша статья появляется на главной странице GeeksforGeeks, и помогите другим гикам.

Пожалуйста, напишите комментарии, если вы обнаружите что-то неправильное, или вы хотите поделиться дополнительной информацией по теме, обсужденной выше.

Состояние компонента в React Native

РЕКОМЕНДУЕМЫЕ СТАТЬИ