Component trong ReactJS - Khám phá thành phần trong ReactJS

Ví dụ về Component trong ReactJS

Như ví dụ dưới đây, giao diện người dùng đã được chia nhỏ thành các phần riêng lẻ

Phần Google Custom Search, thanh điều hướng, thanh bên, danh sách các bài báo,... đều được coi là một thành phần riêng lẻ. Chúng ta có thể thực hiện hợp nhất tất cả các thành phần này để tạo thành một giao diện chính, là giao diện người dùng cuối cùng cho trang chủ.

Các loại Component trong ReactJs

Về cơ bản, các Component trong React sẽ trả về một đoạn mã JSX cho biết những gì được hiển thị trên màn hình. Trong React, chúng ta sẽ có hai loại thành phần chính như sau:

Các component chức năng trong ReactJS

Các component chức năng (Functional component) các thành phần chức năng cơ bản là các hàm JavaScript. Chúng ta có thể tạo một thành phần chức năng trong React bằng cách viết một hàm JavaScript. Các hàm này có thể nhận hoặc không nhân dữ liệu dưới dạng tham số. Ví dụ dưới đây cho thấy một component chức năng hợp lệ trong React

function Democomponent()

{

    return <h1>Welcome Message!</h1>;

}

>>> Tham khảo: Khóa học lập trình ReactJS

Class Component trong ReactJS

Class Component: Các class component thường phức tạp hơn một chút so với các thành phần chức năng. Các thành phần chức năng không nhận biết được các thành phần khác trong chương trình trong khi các class component có thể hoạt động với nhau. Chúng ta có thể truyền dữ liệu từ class component này sang class component khác. Cũng như sử dụng các lớp Javascript ES6 để tạo các thành phần dựa trên các lớp hợp lệ trong React. Ví dụ dưới đây cho thấy một thành phần dựa trên một class hợp lệ trong React:

class Democomponent extends React.Component

{

    render(){

          return <h1>Welcome Message!</h1>;

    }

}

Các component được tạo ra trong hai ví dụ trên có vai trò tương đương. Hãy nhớ bạn chỉ nên sử dụng các component chức năng khi chắc chắn rằng các component này không yêu cầu tương tác hoặc hoạt động với bất kỳ thành phần nào khác. Nghĩa là các component này không yêu cầu dữ liệu từ các thành phần khác, tuy nhiên chúng ta có thể tạo ra nhiều thành phần chức năng trong một thành phần chức năng duy nhất. 

Cách hiển thị Component trong ReactJS

React có khả năng hiển thị các thành phần do người dùng định nghĩa. Để hiển thị một thành phần trong React, chúng ta có thể khởi tạo một phần tử với một thành phần do người dùng xác định và chuyển phần tử này làm tham số đầu tiên cho ReactDOM.render () hoặc truyền trực tiếp thành phần làm đối số đầu tiên cho phương thức ReactDOM.render (). Ví dụ về cú pháp khởi tạo một component thành một phần tử:

const elementName = <ComponentName />;

Trong cú pháp trên, ComponentName là tên của phần tử do người dùng xác định. 

Note: Tên của một thành phần luôn phải bắt đầu bằng chữ in hoa. Điều này được thực hiện để phân biệt thẻ thành phần với các thẻ html.

Ví dụ dưới đây hiển thị một component có tên Welcome đến màn hình:

import React from 'react';

import ReactDOM from 'react-dom';

// This is a functional component

function Welcome()

{

        return <h1>Hello World!</h1>

}

ReactDOM.render(

    <Welcome />, 

    document.getElementById("root")

);

Đầu ra 

Trong ví dụ trên ta có:

ReactDOM.render() là tham số đầu tiên, React sẽ gọi thành phần này là Welcome và trả về kết quả là <h1>Hello World!</h1> . Sau đó ReactDOm sẽ cập nhật DOM một cách hiệu quả để khớp với phần tử được trả về và hiển thị phần tử đó thành phần tử DOM với id là “root”

Kết luận: Có thể nói component là cốt lõi của React. Bài viết trên đã phân tích sự khác nhau cũng như cách tạo nên các thành phần trong ReactJs cùng ví dụ cụ thể. Việc hiểu rõ cách sử dụng các thành phần này sẽ giúp các ứng dụng React có hiệu năng tốt hơn, dễ đọc và dễ test hơn. Đừng quên tìm hiểu thêm về ReactJS và các ngôn ngữ lập trình khác qua các khóa học lập trình tại Viện công nghệ thông tin T3H.