报告:目前完成度【 0.5/3 】,预计上线时间:【 未知 】 【问卷调查】
英文链接源链接 [6852]
contenteditable="true"

React Native - State 介绍

React Components内部的数据由 state 和 props 管理。在本章中,我们将讨论状态。

国家与道具之间的区别

状态是可变的,而道具是不可变的。这意味着状态可以在将来更新,而道具无法更新。

使用状态

这是我们的根本组成部分。我们只是导入 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>
      );
   }
}

我们可以从模拟器文本中看到状态,如以下屏幕截图所示。

React Native 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;

注释-在所有章节中,我们将对有状态(容器)组件使用类语法,对于无状态(表示性)组件使用函数语法。我们将在下一章中了解有关组件的更多信息。

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

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

class Home extends Component {
   constructor() {
      super()
      this.updateState = this.updateState.bind(this)
   }
   updateState() {
      //
   }
   render() {
      //
   }
}
点我分享笔记