React Native – Phân biệt Props và State cực kỳ đơn giản và dễ hiểu

0
81
Bài này thuộc phần 4 của 6 phần trong series React Native Training cho người mới

react-native-props-and-state-compressed

Nếu bạn đã học ReactJS hay React Native, bạn sẽ thấy các Props và State được sử dụng rất nhiều. Vậy chính xác chúng là gì?  Làm thế nào để chúng ta sử dụng chúng đúng mục đích đây?

Khi mình bắt đầu làm dự án với React Native mà trước đó không hề có kiến thức về ReactJS, mình đã mất một khoảng thời gian dài để 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 ^_^

Để các bạn không đ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 and State là hai kiểu dữ liệu được control như một component

Props

Props thực chất là viết tắt của Properties (Dịch chuẩn là thuộc tính).

Ví dụ, một thành phần cơ bản trong React Native là Image. Khi bạn tạo ra một image, bạn có thể sử dụng một prop có tên là source để có thể truyền vào image nào sẽ được hiển thị ra.

Quy tắc đơn giản là các props không nên thay đổi. Trong thế giới lập trình, chúng ta gọi nó là “Immutable” hoặc trong tiếng Anh đơn giản là “Unchangeable“.

Các Props là không thể thay đổi

Các Components nhận các props từ parent của chúng. Các props này không nên được sửa đổi bên trong component. Trong ReactJS và React Native, các luồng dữ liệu sẽ theo một hướng: Từ parent đến child.

Bạn có thể viết các component của riêng bạn và sử dụng các props. Ý tưởng đằng sau các props là bạn có thể tạo một component duy nhất mà nó được sử dụng ở nhiều nơi khác nhau trong ứng dụng. Parent đang gọi component có thể thiết lập các thuộc tính và nó có thể khác nhau ở mỗi vị trí.

Bạn vẫn còn khó hiểu phải không? Vậy mình sẽ minh họa bằng code nhé

Props giúp tái sử dụng code tốt hơn

Mình ví dụ đơn giản dưới đây để thấy cách sử dụng các props như nào:

// Parent 
export default class ScreenOne extends React.Component {
  render () {
    return (
     <View>
     	 <Heading message={'Custom Heading for Screen One'}/>
     </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'
}

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

<Heading message={'Custom Heading for Screen One'}/>

Lưu ý rằng cùng một component Heading có thể được tái sử dụng nhiều lần với các giá trị khác nhau của thuộc tính message được truyền đến từ các component cha khác nhau. Nhớ rằng Props không nên được sửa đổi bên trong component Heading.

Bạn có thể tạo nhiều screen có cùng component Heading với giá trị thuộc tính message khác nhau.

Với props và các components cơ bản như Text, Image, và View bạn có thể xây dựng một loạt các màn hình tĩnh. Để tìm hiểu làm thế nào để thực hiện thay đổi ứng dụng của bạn theo thời gian, bạn cần phải tìm hiểu về State ở ngay phần bên dưới đây.

State

State(Dịch chuẩn là 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 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 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. Điều này thật tuyệt, bởi vì bạn không phải lo lắng về việc viết các xử lý sự kiện (event handler) như các ngôn ngữ khác.

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

Bất cứ khi nào dữ liệu thay đổi trong một component, 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, các 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ơi mà trạng thái có thể được sử dụng trong component.

Nếu bạn điền một Form với các text input, mỗi trường 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 (user input). Nếu đầu vào của người dùng 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ó.

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

Hãy xem đoạn code bên dưới để hiểu rõ hơn các 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 lớp Form với một state input. Nó hiển thị một text input chấp nhận đầu vào của người dùng. 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 trên input.

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. Ví dụ đơn giản này minh họa state trong một component có thể được cập nhật như thế nào và cách sử dụng nó.

Nếu bạn không muốn component hiển thị lại với các thay đổi của state, bạn có thể sử dụng phương thức lifecycle shouldComponentUpdate()

Bạn đã hiểu rõ và phân được Props và State chưa? 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ủa sử dụng khái niệm như component, đây là một khái niệm quan trọng và mình sẽ trình bày chi tiết ở bài viết sau. Cùng đón đọc nhé

Xem tiếp các bài trong Series
Phần trước: React Native – Sử dụng các cảm biến (sensor)Phần kế tiếp: React Native: Authentication với Firebase đơn giản và dễ hiểu

BÌNH LUẬN

Please enter your comment!
Please enter your name here