React Native中的组件状态如何理解和使用？

2021年3月30日11:47:21 发表评论 1,012 次浏览

React Native简介

React Native如何工作？

控制组件的数据有两种：

props ：是不可变的, 由父级设置, 并且在组件的整个生命周期中都是固定的。
状态：是可变的。这意味着状态可以在将来更新, 而props则不能。我们可以在构造函数中初始化状态, 然后在要更改状态时调用setState。

props状态

使用props通过组件树传递数据和设置。
切勿在组件内部修改this.props；认为props是一成不变的。
使用props使事件处理程序与子组件进行通信。
使用状态来存储简单的视图状态, 例如是否显示下拉选项。
切勿直接修改this.state, 而应使用this.setstate。

商店：

商店拥有应用程序的整个状态树。更改其内部状态的唯一方法是在其上调度操作。商店不是阶级。它只是一个带有多种方法的对象, 我将在React Native上即将发布的文章中对此进行解释。

了解props, 状态以及存储如何以及在何处使用这些组件之间差异的更详尽的方法。

让我们举一个例子来了解更多关于状态:

例如, 假设我们要使文本显示/隐藏TextInput布局中的密码。 "密码是否被隐藏"随时间而变化, 因此应保持其状态。

import React, { Component } from 'react' ;
import {
   AppRegistry, StyleSheet, Text, View, TextInput, TouchableOpacity
} from 'react-native' ;
  
export default class lsbin 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( 'lsbin' , () => lsbin);

在这里，我们已经在构造函数中初始化了state，然后当我们想要更新它时调用setState。我们实际上用了两种状态。一个用于更新密码的布尔值是否隐藏，另一个用于显示/隐藏密码的字符串文本。运行完应用程序后，你会看到如下内容:

对于完整的应用程序, 请查看链接：Github

现在, 让我们看一个示例以了解更多有关props:

import React, { Component } from 'react' ;
import {
   AppRegistry, Image
} from 'react-native' ;
  
export default class lsbin 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( 'lsbin' , () => lsbin);

现在, 在这里, 我们实际上是从url获取图像并将其显示在应用程序上。如果你会注意到, 现在我们仅使用一个链接来显示图像。他人使用该应用程序未完成任何更新。这基本上称为props.

运行应用程序后的演示：