React-native-state

React Native-状態

React Components内のデータは、 state および props によって管理されます。 この章では、*状態*について説明します。

状態と小道具の違い

*state* は可変ですが、 *props* は不変です。 つまり、 *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 キーワードは環境オブジェクト（クラス）にバインドされることに注意してください。 これにより、予期しない動作が発生する場合があります。

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

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