State (trạng thái) hoạt động khác với Props. State là thành phần của component, trong khi các props lại được truyền giá trị từ bên ngoài vào component.

State và Props là 2 loại dữ liệu dùng để quản lý 1 component.

"State có thể thay đổi"

Trong tiếng Anh, ‘state of a being’ là chỉ đến tình trạng thể chất của một người, và nó là một trạng thái đơn thuần, thay đổi theo thời gian. Tương tự trong ReactJS và React Native, State được sử dụng trong các component để theo dõi thông tin.

Hãy nhớ rằng không cập nhật state trực tiếp bằng cách sử dụng this.state. Luôn sử dụng phương thức setState để cập nhật state của các đối tượng. Sử dụng setState để re-renders một component và tất cả các component con.

Bạn có thể set state khi nào bạn có dữ liệu mới từ server, hoặc từ user nhập vào.

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

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

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

  render() {
    let display = this.state.isShowingText ? 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);