Với React Component, bạn có thể chia các thành phần trên web thành những phần riêng biệt, có khả năng tái sử dụng cao cũng như độc lập.

React Component là gì?

Là một trong những thành phần quan trọng nhất được các lập trình viên nhắc đến, React Component là cách mà chúng ta tổ chức các thành phần thành các đối tượng riêng biệt, giúp quản lý dự án hiệu quả hơn nhiều.

React Component nhận đầu vào (không bắt buộc) và trả ra một React element có thể render ra để hiển thị.

Một React component có thể là “stateful” (dạng class) hoặc “stateless” (chỉ là một kiểu function).

Stateless React Component

Hãy tham khảo một ví dụ code dưới đây:

import React from 'react'

const XinChao = () => {
  return ( <h1>Cam on vi da tim hieu React tren codetot.edu.vn</h1> )
}

export default class App extends React.Component {
  render(){
    return (
      <div>
        <XinChao/>
      </div>
    )
  }
}

Ví dụ ở trên biểu thị một component “stateless” có tên “XinChao” được chèn vào trong “<App/>”. Nó chỉ bao gồm 1 element H1 bên trong.

Stateful React Component

Ta hãy cùng tham khảo ví dụ dưới đây:

import React from 'react'

class XinChao extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      headline: 'Cam on vi da tim hieu React tren codetot.edu.vn'
    }
  }

  render() {
    return (
      <div>
        <h1>{ this.state.headline }</h1>
        <p>{ this.props.shortIntro }</p>
      </div>
    )
  }
}

export default class App extends React.Component {
  render() {
    const shortIntro = 'Code Tot cung cap cac khoa hoc truc tuyen va xay dung website cho cac cong ty tai Viet Nam.'
    return (
      <div>
        <XinChao shortIntro={shortIntro}/>
      </div>
    )
  }
}

Trong ví dụ ở trên, component stateful “XinChao” được thêm vào component “<App/>”. Nó bao gồm 1 element H1 và 1 element <P>, được bọc trong 1 thẻ “<div>”. Thẻ H1 đọc thông tin từ state – là thông tin nội bộ của component, trong khi <P> đọc thông tin từ props được truyền từ ngoài vào.

Vậy bạn có băn khoăn “state” và “props” khác nhau ở đâu không?

Props trong React Component

Nó là các giá trị không bắt buộc, có thể sử dụng để gửi dữ liệu vào component. Nó là những thuộc tính immutable, tức “chỉ có thể đọc”. Điều này sẽ giúp bạn muốn hiển thị những giá trị cố định.

State trong React Component

React Component kiểu class bao gồm cả những trạng thái nội bộ (state) dùng như lưu trữ dữ liệu cho nó. Các giá trị của state này có thể được cập nhật, và bất kỳ khi nào thay đổi, React sẽ render lại component đấy.

Lifecycle – Vòng đời của React Component

Mỗi React component đều có vòng đời – lifecycle. Nó xác định hành vi của component mỗi khi trải qua một giai đoạn trong vòng này.

Một số ví dụ thực tế có thể là:

  • Khi component chuẩn bị render trên màn hình.
  • Khi đã render trên màn hình.
  • Khi cập nhật/sửa chữa theo một yêu cầu.

Lấy ví dụ, trạng thái componentWillMount thực thi ngay trước khi React component được mounted vào DOM, trong khi componentDidMount được thực thi sau khi mounted vào DOM.

Hình ảnh minh hoạ các lifecycle tương ứng với giai đoạn render

Bài viết lược dịch từ nội dung của Educative.io. Được phép phát hành lại với nội dung ghi tới liên kết gốc của bài viết này.

Author

Khôi là Founder của CODE TOT JSC., công ty chuyên cung cấp dịch vụ website đa tính năng dành cho doanh nghiệp.

Write A Comment