ReactNative学习笔记3

原文地址,本文为原文的不完全翻译

状态

组件Component由两个部分控制它在屏幕上的展示凡是,分别是属性prop和状态State,而属性通常是跟随者组件的生命周期变化的,不能随意改动,如果我们想改变组件的一些显示方式,那么只能使用状态状态State了.
一般来说,在组件的构造方法里面初始化组件的状态,然后在你需要的地方通过setState改变组件的状态,从而达到你想要的效果.
下面的例子是通过改变控件的属性达到让文字进行闪烁的效果:

import React, { Component } from 'react';
import {AppRegistry, Text, View} from 'react-native';
class Blink extends Component {
  constructor(props){
    super(props);
    this.state = {showText: true};
    /*一秒闪烁一次*/
    setInterval(() => {
      this.setState({ showText : !this.state.showText });
    }, 1000);
  }
  
  render(){
    let displayText = this.state.showText ? this.props.text : ''
    return (<Text>{displayText}</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来控制组件的数据流.
在这个例子里面,每调用一次setState方法BlinkApp就会调用一次render()方法来重新渲染到屏幕上面,State每被改变一次,就会调用一次render()重新渲染,这就是State在React中的作用方式.