React Native の状態とは何ですか?-jsチュートリアル-php.cn

React Native の状態とは何ですか?

WBOY

リリース： 2023-09-19 13:45:04

転載

679 人が閲覧しました

ステータスはデータのソースです。常に状態を可能な限りシンプルに保ち、ステートフルコンポーネントの数を最小限に抑えるように努める必要があります。たとえば、状態データを必要とするコンポーネントが 10 個ある場合、これらすべてのコンポーネントの状態を保持するコンテナコンポーネントを作成する必要があります。

例 1

ユーザーがボタンを押すと、ボタンのタイトルが ON/OFF に変わります。

状態は、以下に示すようにコンストラクター内で初期化されます。 -

constructor(props) {
   super(props);
   this.state = { isToggle: true };
}

ログイン後にコピー

isToggle は、状態に割り当てられたブール値です。ボタンのタイトルは、isToggle プロパティに基づいて決定されます。値が true の場合、ボタンのタイトルは ON になり、それ以外の場合は OFF になります。

ボタンが押されると、onpress メソッドが呼び出され、以下に示すように isToggle 値を更新する setState が呼び出されます-

onPress={() => {
   this.setState({ isToggle: !this.state.isToggle });
}}

ログイン後にコピー

ユーザーがボタンをクリックすると、onPress イベントが呼び出されます。が呼び出され、setState によって isToggle プロパティの状態が変更されます。

App.js

import React, { Component } from "react";
import { Text, View, Button, Alert } from &#39;react-native&#39;;

class App extends Component {

   constructor(props) {
      super(props);
      this.state = { isToggle: true };
   }

   render(props) {
      return (
         <View style={{flex :1, justifyContent: &#39;center&#39;, margin: 15 }}>
            <Button
               onPress={() => {
                  this.setState({ isToggle: !this.state.isToggle });
               }}
               title={
                  this.state.isToggle ? &#39;ON&#39; : "OFF"
               }
               color="green"
            />
         </View>
      );
   }
}
export default App;

ログイン後にコピー

Output

ユーザーがボタンを押すと、ボタンが切り替わります。

React Native 中的状态是什么？

例 2

ユーザーがクリックしたときにテキストを変更します。

次の例では、状態はコンストラクター内で次のように表示されます-

constructor(props) {
   super(props);
   this.state = { myState: &#39;Welcome to Tutorialspoint&#39; };
}

ログイン後にコピー

状態 myState は Text コンポーネント内で次のように表示されます-

<Text onPress={this.changeState} style={{color:&#39;red&#39;, fontSize:25}}>{this.state.myState} </Text>

ログイン後にコピー

ユーザーがタッチするか、テキストが押されると、onPress イベントがトリガーされ、this.changeState メソッドが呼び出されます。これにより、以下に示すように状態 myState が更新されてテキストが変更されます -

changeState = () => this.setState({myState: &#39;Hello World&#39;})

ログイン後にコピー

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

class App extends Component {

   constructor(props) {
      super(props);
      this.state = { myState: 'Welcome to Tutorialspoint' };
   }
   changeState = () => this.setState({myState: &#39;Hello World&#39;})
   render(props) {
      return (
         
            
                                        {this.state.myState} 
            
         
      );
   }
}
export default App;

ログイン後にコピー