React Native - State

Các thành phần React được quản lý bởi dữ liệu bên trong state và props. Trong chương này, chúng ta sẽ nói vềstate.

Sự khác biệt giữa Trạng thái và Đạo cụ

các state có thể thay đổi trong khi propslà bất biến. Điều này có nghĩa rằngstate có thể được cập nhật trong tương lai trong khi không thể cập nhật phù hợp.

sử dụng State

Đây là thành phần gốc của chúng tôi. Chúng tôi chỉ đang nhập khẩuHome sẽ được sử dụng trong hầu hết các chương.

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>
      );
   }
}

Chúng ta có thể thấy văn bản giả lập từ trạng thái như trong ảnh chụp màn hình sau.

Cập nhật trạng thái

Vì trạng thái có thể thay đổi, chúng tôi có thể cập nhật nó bằng cách tạo deleteState và gọi nó bằng cách sử dụng onPress = {this.deleteText} biến cố.

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- Trong tất cả các chương, chúng ta sẽ sử dụng cú pháp lớp cho các thành phần trạng thái (vùng chứa) và cú pháp hàm cho các thành phần không trạng thái (trình bày). Chúng ta sẽ tìm hiểu thêm về các thành phần trong chương tiếp theo.

Chúng ta cũng sẽ học cách sử dụng cú pháp hàm cho Trang chủ updateState. Bạn nên nhớ rằng cú pháp này sử dụng phạm vi từ vựng vàthistừ khóa sẽ được liên kết với đối tượng môi trường (Lớp). Điều này đôi khi sẽ dẫn đến hành vi không mong muốn.

Cách khác để xác định các phương thức là sử dụng các hàm EC5 nhưng trong trường hợp đó, chúng ta sẽ cần phải liên kết thistheo cách thủ công trong hàm tạo. Hãy xem xét ví dụ sau để hiểu điều này.

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