首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

State

有两种类型的数据控制组件:propsstateprops由父级设置,它们在组件的整个生命周期中都是固定的。对于将要改变的数据,我们必须使用state

通常,您应该state在构造函数中进行初始化,然后setState在想要更改时调用它。

例如,假设我们想让文字始终闪烁。文本本身在闪烁组件被创建时被设置一次,所以文本本身就是一个prop。“文本当前是打开还是关闭”随着时间的推移而变化,所以应该保持在state

代码语言:javascript
复制
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class Blink extends Component {
  constructor(props) {
    super(props);
    this.state = {showText: true};

    // Toggle the state every second
    setInterval(() => {
      this.setState(previousState => {
        return { showText: !previousState.showText };
      });
    }, 1000);
  }

  render() {
    let display = this.state.showText ? this.props.text : ' ';
    return (
      <Text>{display}</Text>
    );
  }
}

export default class BlinkApp extends Component {
  render() {
    return (
      <View>
        <Blink text='I love to blink' />
        <Blink text='Yes blinking is so great' />
        <Blink text='Why did they ever take this out of HTML' />
        <Blink text='Look at me look at me look at me' />
      </View>
    );
  }
}

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => BlinkApp);

在实际应用中,你可能不会用定时器设置状态。当有新的数据从服务器到达时,或者从用户输入时,您可能会设置状态。您也可以使用像Redux这样的状态容器来控制数据流。在这种情况下,您将使用Redux来修改您的状态,而不是setState直接调用。

当调用setState时,BlinkApp将重新渲染其组件。通过调用Timer中的setState,该组件将在每次定时器滴答时重新呈现。

State的工作方式与在React中的工作方式相同,因此有关处理状态的更多详细信息,可以查看React.Component API。在这一点上,你可能会很烦恼,到目前为止,我们的大多数例子都使用了无聊的默认黑色文本。为了让事情更美好,你必须了解Style。

扫码关注腾讯云开发者

领取腾讯云代金券