Top Ad unit 728 × 90

Lập Trình React Native: Tìm hiểu về state

Trong bài tìm hiểu Props hôm trước mình đã giới thiệu cho các bạn biết về props, và trong bài ngày hôm nay mình sẽ cùng các bạn đi tìm hiểu về một đối tượng quan trọng nữa trong React Native. Đó chính là state.


Trong React Native có hai loại dữ liệu kiểm soát thành phần: props đã được giới thiệu trong bài hôm trước các bạn có thể tham khảo tại bài Lập trình React Native : Tìm hiểu về Props , cái thứ 2 là state sẽ được tìm hiểu ngay sau đây.


Đối với dữ liệu mà thay đổi thì các bạn nên sử dụng state. Nói chung, bạn nên khởi tạo state trong constructor, và sau đó gọi setState khi bạn muốn thay đổi nó.

Ví dụ: Giả sử chúng ta muốn làm cho văn bản nhấp nháy mọi lúc. Các văn bản chính nó được lập một lần khi thành phần nhấp nháy được tạo ra, do đó, văn bản chính nó là một props. Cho dù các văn bản hiện đang bật hay tắt thay đổi theo thời gian, do đó nên giữ trong state.

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class Blink extends Component {
  constructor(props) {
    super(props);
    this.state = {showText: true};

    // Toggle the state every second
    setInterval(() => {
      this.setState(previousState => {
        return { showText: !previousState.showText };
      });
    }, 1000);
  }

  render() {
    let display = this.state.showText ? this.props.text : ' ';
    return (
      <Text>{display}</Text>
    );
  }
}

export default class BlinkApp extends Component {
  render() {
    return (
      <View>
        <Blink text='I love to blink' />
        <Blink text='Yes blinking is so great' />
        <Blink text='Why did they ever take this out of HTML' />
        <Blink text='Look at me look at me look at me' />
      </View>
    );
  }
}

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => BlinkApp);


Trong ứng dụng thực, có thể bạn sẽ không thể thiết lập được state với một bộ đếm thời gian. Bạn có thể đặt trạng thái khi bạn có dữ liệu mới đến từ máy chủ, hoặc từ đầu vào của người dùng. Bạn cũng có thể sử dụng một nơi chứa trạng thái như Redux để kiểm soát luồng dữ liệu của bạn. Trong trường hợp đó bạn sẽ sử dụng Redux để thay đổi trạng thái của bạn thay vì gọi setState trực tiếp.

Khi setState được gọi, BlinkApp sẽ được render lại Component của nó. Bằng cách gọi setState trong Timer, thành phần này sẽ được render mỗi khi Timer ticks.

Trạng thái hoạt động theo cách tương tự như trong phản ứng, vì vậy để biết được thêm chi tiết về xử lý trạng thái, bạn có thể tham khảo tại React.Component API. Tại thời điểm này, bạn có thể khó chịu vì hầu hết các ví dụ của chúng tôi cho đến này đều sử dụng văn bản màu đen mặc định. Để làm đẹp mọi thứ theo ý của các bạn, thì bạn cần phải học về style. Style mình sẽ hướng dẫn các bạn ở bài sau.

Bài này mình sẽ dừng lại tại đây. Nếu thấy hay hãy share cho nhiều người cùng học nhé!


Lập Trình React Native: Tìm hiểu về state Reviewed by Thế Giới Tri Thức on tháng 12 07, 2017 Rating: 5

Không có nhận xét nào:

All Rights Reserved by THẾ GIỚI TRI THỨC © 2018
Thiết kế bởi: THẾ GIỚI TRI THỨC

Biểu mẫu liên hệ

Tên

Email *

Thông báo *

Được tạo bởi Blogger.