ReactNative-状態

Reactコンポーネントは、内部のデータによって管理されます state そして props。この章では、state。

州と小道具の違い

インクルード state 変更可能です props不変です。この意味はstate 適切に更新することはできませんが、将来的に更新することができます。

状態を使用する

これが私たちのルーツコンポーネントです。インポートしているだけです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;

NOTES-すべての章で、ステートフル（コンテナ）コンポーネントのクラス構文とステートレス（プレゼンテーション）コンポーネントの関数構文を使用します。コンポーネントについては、次の章で詳しく説明します。

また、Homeの関数構文の使用方法についても学習します。 updateState。この構文は字句スコープを使用し、thisキーワードは環境オブジェクト（クラス）にバインドされます。これにより、予期しない動作が発生する場合があります。

メソッドを定義するもう1つの方法は、EC5関数を使用することですが、その場合はバインドする必要があります thisコンストラクターで手動で。これを理解するために、次の例を検討してください。

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