React Native状态state介绍和用法 – React Native实战教程

上一章React
Native实战教程请查看:创建第一个React Native Android APP

React组件中的数据由状态state和prop管理,在这一章,我们将讨论状态state。

状态state和prop的区别

state是可变的,而prop是不可变的,这意味着状态可以在未来更新,而prop不能更新。

使用状态state

这是我们的根组件,我们只是导入将在大多数章节中使用的Home。

App.js

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';

export default class App extends React.Component {
  state = {
    myState:
      '动态规划算法的设计可以分为如下四个步骤: 1 描述最优解的结构。 2 递归定义最优解的值。 3 按自底向上的方式计算最优解的值。 4 由计算出的结果构造一个最优解。',
  };
  render() {
    return (
      <View>
        <Text> {this.state.myState} </Text>
      </View>
    );
  }
}

我们可以在模拟器文本中看到如下截图所示的状态。

react_native_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:
      "在最好的情况下,k=0,因此s'=s+q,并且立刻能得出偏移s+1,s+2,s+3,…s+q-1。",
  };
  updateState = () => this.setState({myState: 'The state is updated'});
  render() {
    return (
      <View>
        <Text onPress={this.updateState}>{this.state.myState}</Text>
      </View>
    );
  }
}
export default Home;

注意,在所有章节中,我们将对有状态(容器)组件使用类语法,对无状态(表示)组件使用函数语法,我们将在下一章学习更多关于组件的内容。

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

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

class Home extends Component {
    constructor() {
       super()
       this.updateState = this.updateState.bind(this)
    }
    updateState() {
       //
    }
    render() {
       //
    }
 }
微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?