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

4
Dịch vụ dạy kèm gia sư lập trình
Bài này thuộc phần 4 của 9 phần trong series React Native Training cho người mới

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 '}/>
Lưu ý rằng: Heading component có thể được sử dụng nhiều lần ở nhiều nơi, với các giá trị khác nhau truyền vào props message.

Nhớ rằng, không nên sửa đổi giá trị Props message bên trong component Heading. Ở đây, chúng ta chỉ đọc và in ra màn hình giá trị của props message mà thôi.

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.

Lưu ý: Giá trị của State chỉ được thay đổi bởi chính Component khai báo state đó. Các component con không thể thay đổi giá trị state đó được.

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.

Tip: Nếu bạn không muốn component render lại DOM khi thay đổi của state, bạn có thể sử dụng phương thức shouldComponentUpdate()

Đế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

Xem tiếp các bài trong Series
Phần trước: [React Native] Sử dụng sensor cảm biếnPhần kế tiếp: [React Native] Tạo tính năng login với Firebase Authentication
Dịch vụ phát triển ứng dụng mobile giá rẻ - chất lượng
Bài trước[Video] Tặng khóa học Xây dựng RESTful API bằng Node.js
Bài tiếp theo3 cách kiểm tra một phần tử trong mảng
Sơn Dương
Tên đầy đủ là Dương Anh Sơn. Tốt nghiệp ĐH Bách Khoa Hà Nội. Mình bắt đầu nghiệp coder khi mà ra trường chẳng xin được việc đúng chuyên ngành. Mình tin rằng chỉ có chia sẻ kiến thức mới là cách học tập nhanh nhất. Các bạn góp ý bài viết của mình bằng cách comment bên dưới nhé !

4
Bình luận. Cùng nhau thảo luận nhé!

avatar
  Theo dõi bình luận  
Mới nhất Cũ nhất Nhiều voted nhất
Thông báo
Trần Quốc Hoàn
Guest
Trần Quốc Hoàn

Cảm ơn bạn. Đây là một bài viết rất hay và dễ hiểu!

Xuân Lộc
Guest
Xuân Lộc

Bài viết hay lắm a

Đỗ Huệ
Guest

Tks ad. bài viết rất hay