State - 状态

优质
小牛编辑
129浏览
2023-12-01

这次使用两种数据来控制一个定制组件: propsstateprops 是在父组件中指定,而且一经指定,在被指定的组件的生命周期中则不再改变。对于需要改变的数据(即变量)需要引入 state

一般来说,需要在 constructor 中初始化 state。然后在需要修改时调用 setState 方法。

下例是制作一段不断闪烁的文字实例代码,其做法就是定时改变 <Text> 中的文字为空字符串,在定时改回。

class Blink extends Component {
  constructor(props) {
    super(props);
    this.state = { showText: true };
    setInterval(() => {
      this.setState({ showText: !this.state.showText });
    }, 1000);
  }

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

export default class HelloWorld 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>
    );
  }
}

在实际开发中,我们一般会在定时器函数 setInterval、setTimeout 等中来操作 state 。典型的场景是在就受到服务器返回的新数据,或者在用户输入数据之后。你也可以使用一些 状态容器 比如 Redux 来统一管理数据流。state 的工作原理和 React.js 完全一致,所以对于处理 state 的深入细节文档中不再详细介绍。