React Native的State

有两种类型的数据控制组件：props和state。 props由父节点设置，它们在组件的整个生命周期中都是固定的。对于要改变的数据，我们必须使用状态。一般来说，你应该在构造函数中初始化状态，然后当你想改变它时调用setState。例如，假设我们想让文本一直闪烁。文本本身在创建闪烁组件时设置一次，因此文本本身是一个props。 “文本是否当前打开或关闭”随时间改变，所以应保持状态。

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({ showText: !this.state.showText });
    }, 1000);
  }

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

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

AppRegistry.registerComponent('BlinkApp', () => BlinkApp);

在实际应用中，您可能不会使用计时器设置状态。您可以在从服务器收到新数据或用户输入时设置状态。您还可以使用状态容器（如Redux）来控制数据流。在这种情况下，您将使用Redux来修改状态，而不是直接调用setState。 State的工作方式与React中的相同，因此有关处理状态的更多详细信息，可以查看React.Component API。在这一点上，你可能会感到懊恼，我们的大多数示例迄今为止使用无聊的默认黑色文本。为了使事情更美丽，你必须学习风格。

Comments