State（狀態）

我們使用兩種資料來控制一個元件：props和state。props是在父元件中指定，而且一經指定，在被指定的元件的生命週期中則不再改變。 對於需要改變的資料，我們需要使用state。

一般來說，你需要在 constructor 中初始化state（譯註：這是 ES6 的寫法，早期的很多 ES5 的例子使用的是 getInitialState 方法來初始化 state，這一做法會逐漸被淘汰），然後在需要修改時呼叫setState方法。

假如我們需要製作一段不停閃爍的文字。文字內容本身在元件建立時就已經指定好了，所以文字內容應該是一個prop。而文字的顯示或隱藏的狀態（快速的顯隱切換就產生了閃爍的效果）則是隨著時間變化的，因此這一狀態應該寫到state

import React, { Component } from 'react';
import { Text, View } from 'react-native';

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

    // 每1000毫秒對showText狀態做一次取反操作
    setInterval(() => {
      this.setState(previousState => {
        return { isShowingText: !previousState.isShowingText };
      });
    }, 1000);
  }

  render() {
    // 根據當前showText的值決定是否顯示text內容
    if (!this.state.isShowingText) {
      return null;
    }

    return (
      <Text>{this.props.text}</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>
    );
  }
}
 

目錄

實際開發中，我們一般不會在定時器函式（setInterval、setTimeout 等）中來操作 state。典型的場景是在接收到伺服器返回的新資料，或者在使用者輸入資料之後。你也可以使用一些“狀態容器”比如Redux來統一管理資料流。

每次呼叫setState時，BlinkApp 都會重新執行 render 方法重新渲染。這裡我們使用定時器來不停呼叫setState，於是元件就會隨著時間變化不停地重新渲染。

State 的工作原理和 React.js 完全一致，所以對於處理 state 的一些更深入的細節，你可以參閱React.Component API

譯註：提示一些初學者應該牢記的要點：

• 一切介面變化都是狀態state變化
• state的修改必須通過setState()方法
  • this.state.likes = 100; // 這樣的直接賦值修改無效！
  • setState 是一個 merge 合併操作，只修改指定屬性，不影響其他屬性
  • setState 是非同步操作，修改不會馬上生效

看到這裡，你可能覺得我們的例子總是千篇一律的黑色文字，太特麼無聊了。那麼我們一起來學習一下樣式吧。

State（狀態）

ReactNative筆記