ตอบสนองเนทีฟ - สถานะ

ส่วนประกอบของปฏิกิริยาถูกจัดการโดยข้อมูลภายใน 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- ในทุกบทเราจะใช้ไวยากรณ์ของคลาสสำหรับคอมโพเนนต์ stateful (container) และไวยากรณ์ของฟังก์ชันสำหรับคอมโพเนนต์ stateless (presentational) เราจะเรียนรู้เพิ่มเติมเกี่ยวกับส่วนประกอบในบทถัดไป

นอกจากนี้เรายังจะได้เรียนรู้วิธีใช้ไวยากรณ์ของฟังก์ชันสำหรับ Home updateState. คุณควรจำไว้ว่าไวยากรณ์นี้ใช้ขอบเขตคำศัพท์และthisคีย์เวิร์ดจะถูกผูกไว้กับอ็อบเจ็กต์สภาพแวดล้อม (คลาส) บางครั้งอาจนำไปสู่พฤติกรรมที่ไม่คาดคิด

อีกวิธีหนึ่งในการกำหนดวิธีการคือการใช้ฟังก์ชัน EC5 แต่ในกรณีนั้นเราจะต้องผูก thisด้วยตนเองในตัวสร้าง พิจารณาตัวอย่างต่อไปนี้เพื่อทำความเข้าใจสิ่งนี้

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