[React Native] Props và State là gì? Khi nào thì sử dụng?

Nếu bạn đã học ReactJS hay React Native, bạn sẽ gặp các khái niệm Props và State rất nhiều.

Nhưng bạn đã thực sự hiểu props là gì? State là gì chưa? Khi nào thì sử dụng Props? Khi nào cần tới State?

Khi mình bắt đầu làm dự án React Native, trong khi trước đó không hề có kiến thức về ReactJS, mình đã mất một khoảng thời gian để hiểu rõ hai khái niệm này. Giống hệt cái cảm giác như hồi tiếp xúc với Promise trong Javascript vậy (^_^).

🔥 Kể chuyện đêm khuya: Lập trình React Native – Tâm sự của người mới học React Native

Để tránh đi vào “vết xe đổ” của mình khi học React Native. Mình sẽ đơn giản hóa hai khái niệm Props và State cho các bạn dễ hiểu.

Props là gì?

Props thực chất là viết tắt của Properties.

Bạn hình dung Props giống như các attribute của thẻ HTML vậy.

Ví dụ đoạn mã HTML sau:

<img src="img_girl.jpg" width="500" height="600">

Các attribute như src, width, height cũng có thể coi là props của thẻ <img>

Props là cách để bạn có thể truyền dữ liệu từ component cha xuống component con.

Khi truyền dữ liệu qua props, component con chỉ được đọc, không thể thay đổi dữ liệu đó. Nhờ đó mà component được sử dụng ở bất kỳ đâu cũng luôn hiển thị cùng 1 đầu ra khi có cùng 1 giá trị đầu vào. Điều này giúp chúng ra dễ dàng kiểm soát Component hơn.

Ví dụ cách sử dụng Props:

class HelloWorld extends React.Component {
    render() {
      return <h1>Xin chào {this.props.name}</h1>;
    }
  }
  
const element = <HelloWorld name="VNTALKING" />;

Khi nào sử dụng Props?

Khi nào bạn cần truyền dữ liệu từ component cha xuống component con, lúc đó cần sử dụng Props.

🙆 Tìm hiểu kỹ hơn về React Native Component

Mình ví dụ đơn giản dưới đây để thấy cách sử dụng các props để truyền dữ liệu:

// Parent 
export default class WelcomeScreen extends React.Component {
  render () {
    return (
     <View>
     	 <Heading message={'Chào mừng độc giả tới VNTALKING '}/>
     </View>
    )
  }
}

// Child component
export default class Heading extends React.Component {
  render () {
    return (
      <View>
        <Text>{this.props.message}</Text>
      </View>
    )
  }
}
Heading.propTypes = {
  message: PropTypes.string
}
Heading.defaultProps = {
  message: 'Heading One'
}

Giải thích Props

Trong ví dụ trên, chúng ta có một component Heading, với một props là message. Vì vậy, khi bạn cần sử dụng Heading component (ví dụ như ở màn hình WelcomeScreen), chúng ta chỉ cần truyền giá trị vào message là được:

<Heading message={'Chào mừng độc giả tới VNTALKING '}/>

Trong trường hợp bản thân một component nhận dữ liệu trực tiếp từ người dùng thì sao? Ví dụ như nhập dữ liệu thông qua các input field. Đây là lúc nghĩ tới sử dụng State.

State là gì?

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

Trong ReactJS và React Native, State được sử dụng trong các component để lưu thông tin.

Không cập nhật giá trị của state trực tiếp bằng cách sử dụng this.state. Bạn được khuyến cáo luôn sử dụng hàm setState để cập nhật state.Tại sao lại như vậy?

Bởi vì, khi sử dụng hàm setState() để thay đổi giá trị State, React sẽ cập nhật cây DOM một cách tự động. Bạn không phải lo lắng về việc phải thêm viết thêm xử lý sự kiện nữa.

Ví dụ về State:

export default TodoApp;

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

export default class App extends Component {
    state = {
        myState: 'This is a text component, created using state data. It will change or updated on clicking it.'
    }
    updateState = () => this.setState({ myState: 'The state is updated' })
    render() {
        return (
            <View>
                <Text onPress={this.updateState}> {this.state.myState} </Text>
            </View>
        );
    }
}

Vậy khi nào State được sử dụng?

Bất cứ khi nào dữ liệu trong một component cần thay đổi, State có thể được sử dụng.

Sự tương tác của người dùng với các component là các ví dụ về cách hoạt động của state. Như click các button, tick vào checkbox, điền các biểu mẫu… là các ví dụ về sự tương tác của người dùng.

Nếu bạn điền một form gồm các text input field, mỗi field trong form sẽ giữ lại trạng thái của nó dựa trên dữ liệu đầu vào của người dùng.

Nếu đầu vào thay đổi, trạng thái của các text input sẽ thay đổi. Đây là nguyên nhân cần re-rendering của component và tất cả các component con của nó.

🔥 Đừng bỏ lỡ: Tải miễn phí sách Fullstack React Native (giá thị trường là 200$)

State sử dụng như nào?

Hãy xem đoạn code bên dưới để hiểu rõ hơn cách state hoạt động như thế nào trong một Form.

class Form extends React.Component {

  constructor (props) {
     super(props)
     this.state = {
       input: ''
     }
  }

handleChangeInput = (text) => {
    this.setState({ input: text })
  }
  
  render () {
    const { input } = this.state

    return (
       <View>
          <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}}
            onChangeText={this.handleChangeInput}
            value={input}
          />
        </View>
      )
    }
 }

Trong đoạn code trên, bạn có thể thấy một Form component khai báo state với một key là input.

Form này hiển thị một text input field để người dùng nhập. Mỗi khi người dùng nhập văn bản, onChangeText được kích hoạt, lần lượt gọi setState để thay đổi giá input trong state.

setState kích hoạt re-rendering lại component, và giao diện người dùng (UI) bây giờ được cập nhật với thông tin mới nhất được nhập từ người dùng.

Đến đây bạn đã hiểu rõ Props và State là gì rồi đúng không?

Mình rất muốn nghe ý kiến của bạn về vấn đề này. Nhân tiện, trong bài viết có sử dụng khái niệm như component, đây là một khái niệm quan trọng và mình đã trình bày ở bài viết: Tìm hiểu Component trong React Native

​​Nhận sách ​​học Flutter qua 65 ứng dụng

​Flutter là nền tảng lập trình đa nền tảng (Android & iOS) do Google chống lưng. Nếu bạn muốn học Flutter thì không nên bỏ qua cuốn sách này. Hiện sách này đang bán trên Amazon với giá 19,99 $ và giờ VNTALKING miễn phí cho bạn.

DOWNLOAD