React Native - 狀態

React 元件內部的資料由狀態(state)和屬性(props)管理。在本章中，我們將討論狀態。

狀態和屬性的區別

狀態是可變的，而屬性是不可變的。這意味著狀態可以在將來更新，而屬性則不能更新。

使用狀態

這是我們的根元件。我們只是匯入了Home，它將在大多數章節中使用。

App.js

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

export default class App extends React.Component {
   state = {
      myState: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, used do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
      nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
      fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
      culpa qui officia deserunt mollit anim id est laborum.'
   }
   render() {
      return (
      <View>
         <Text> {this.state.myState} </Text>
      </View>
      );
   }
}

我們可以在模擬器中看到來自狀態的文字，如下面的螢幕截圖所示。

更新狀態

由於狀態是可變的，我們可以透過建立deleteState函式並使用onPress = {this.deleteText}事件呼叫它來更新它。

Home.js

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

class Home extends Component {
   state = {
      myState: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
         do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
         ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
         in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
         deserunt mollit anim id est laborum.'
   }
   updateState = () ⇒ this.setState({ myState: 'The state is updated' })
   render() {
      return (
         <View>
            <Text onPress = {this.updateState}>
               {this.state.myState}
            </Text>
         </View>
      );
   }
}
export default Home;

注意 - 在所有章節中，我們將使用類語法表示有狀態（容器）元件，使用函式語法表示無狀態（展示）元件。我們將在下一章中學習更多關於元件的內容。

我們還將學習如何使用箭頭函式語法表示updateState。您應該記住，此語法使用詞法作用域，並且this關鍵字將繫結到環境物件（類）。這有時會導致意外行為。

定義方法的另一種方法是使用 EC5 函式，但在這種情況下，我們需要在建構函式中手動繫結this。請考慮以下示例以瞭解這一點。

class Home extends Component {
   constructor() {
      super()
      this.updateState = this.updateState.bind(this)
   }
   updateState() {
      //
   }
   render() {
      //
   }
}