React Native - State

简述

React Components 内部的数据由state和props. 在本章中，我们将讨论state.

State 和Props之间的区别

这state是可变的，而props是不可变的。这意味着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>
      );
   }
}

我们可以从 State 中看到模拟器文本，如下面的屏幕截图所示。

更新 State

由于 State 是可变的，我们可以通过创建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;

注意− 在所有章节中，我们将对有 State （容器）组件使用类语法，对无 State （展示）组件使用函数语法。我们将在下一章中了解有关组件的更多信息。

我们还将学习如何使用箭头函数语法updateState. 您应该记住，此语法使用词法范围，并且this关键字将绑定到环境对象（类）。这有时会导致意外行为。

定义方法的另一种方法是使用 EC5 函数，但在这种情况下，我们需要绑定this在构造函数中手动。请考虑以下示例来理解这一点。


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

React Native - State

简述

State 和Props之间的区别

使用 State

更新 State