React Native基礎：4-狀態State

通過組件的屬性(Props)可以傳遞數據到組件內部，但屬性的值是不能改變的。本節會介紹React Native中另一個重要的概念——狀態(State)。State和Props都是用來存儲數據的，Props是在父組件中指定，而且一旦指定，在組件的生命周期中就不能夠再改變。 對于需要改變的數據，我們則需要使用到State，State一般用來記錄組件的內部數據。

一般來說我們需要在組件的構造函數（constructor）中對State進行初始化，構造函數會接收來自外部傳遞的Props。接下來我們來給上一節創建的Hello組件添加一點新功能，讓后面的名字閃爍起來。在State中保存一個showText變量來控制組件的顯示內容，并且設置了一個定時器，每一秒鐘改變一次showText變量的值，從而讓文字不停的閃爍。

class Hello extends Component {
  constructor(props) {
    super(props);
    this.state = { showText: true };
    // 每1000毫秒對showText狀態做一次取反操作
    setInterval(() => {
      this.setState({ showText: !this.state.showText });
    }, 1000);
  }
  
  render() {
    //showText為真，則顯示name屬性，showText為假，則顯示hi
    let display = this.state.showText ? this.props.name : 'hi';
    return (
      <Text>{display}</Text>
    );
  }
}

在終端中切換到項目所在的目錄，并輸入react-native run-ios命令運行程序，耐心的等待應用的編譯，然后就可以看到下方的效果。

---