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>
    );
  }
}

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

更新状态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() {
       //
    }
 }

状态state和prop的区别

使用状态state

更新状态state

猜你喜欢