React Native-상태

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키워드는 환경 개체 (Class)에 바인딩됩니다. 이로 인해 예기치 않은 동작이 발생할 수 있습니다.

메서드를 정의하는 다른 방법은 EC5 함수를 사용하는 것이지만이 경우 바인딩해야합니다. this생성자에서 수동으로. 이를 이해하려면 다음 예를 고려하십시오.

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