Component là gì? Hiểu về Component trong React và Vue

1367

Component là gì?

Component là thuật ngữ được hiểu như là bộ phận, thành phần hoặc yếu tố cấu thành của một hệ thống hoặc phần mềm trong lĩnh vực IT. Trong lĩnh vực phần mềm, component có chức năng khá mạnh mẽ, nó được tái sử dụng từ các chương trình khác, được liên kết và sử dụng như một bộ phận của chương trình.

Component trong ReactJS

Trong React hay Vue, Component là một thuật ngữ nên không thể định nghĩa rõ. Chúng ta có thể hiểu rằng mỗi đoạn code sẽ được phân chia thành những Component không lệ thuộc lẫn nhau và có thể tái sử dụng khi cần thiết.
Khác với các framework khác, React không sử dụng template mà được xây dựng xung quanh các component. Trong React, để xây dựng trang web chúng ta sử dụng những component, có thể tái sử dụng một component ở nhiều nơi với các trạng thái hoặc thuộc tính khác nhau và một component có thể chứa thành phần khác.
Mỗi component có một trạng thái riêng, có thể thay đổi và React sẽ thực hiện cập nhật component dựa trên những thay đổi của trạng thái. Để khởi tạo Component chúng ta sẽ có nhiều cách như sau:
  • Dùng let, const trong JavaScript ES6 hoặc var ở các phiên bản JavaScript thấp hơn.
  • Dùng Function.
  • Dùng Class trong JavaScript ES6.

Ví dụ

Ví dụ trên thì khi dùng let hoặc const, chúng ta cần dùng Arrow Function hoặc Anonymous Function để gán vào cho biến hoặc hằng. Trong khi Function có cách dùng tương tự cách định nghĩa biến và hằng thì Class lại phải kế thừa từ Class Component trong ReactJS để có thể chạy được.
Ở ví dụ 3, các bạn nên lưu ý là cú pháp dùng 2 dấu (...)  này có ý nghĩa là vừa vừa return như ví dụ 2 và vừa tạo ra JSX ở bên trong nó. Xem thêm React cơ bản tại đây.
Tiếp tục sau khi khởi tạo, tên của biến, hằng, function và class sẽ trở thành 1 Component với HTML Tag là <tenBien /> . Nên nhớ là HTML Tag phải là thẻ tự đóng, còn khi nào thì nên dùng thẻ bao thì tôi sẽ nói rõ khi chúng ta tìm hiểu tới khái niệm về Props (Properties).
  Các Tools bạn có thể rất cần cho các React Components của mình
  Vue.js: Những điểm tốt, điểm xấu và điểm "tạm chấp nhận được"

Component trong VueJS

Component là một trong các tính năng mạnh mẽ nhất của Vue.js. Nó giúp cho chúng ta gom nhóm các mã HTML lại để tái sử dụng cho các module tương tự. Ở một mức độ cao thì component là một thành phần được Vue.js biên dịch để xử lý các hành vi. Và trong một vài trường hợp thì nó cũng có thể xuất hiện như một phần tử HTML với các attribute đặc biệt.

Trong Vue.js để khai báo một component ở mức độ global thì chúng ta sử dụng cú pháp:

Trong đó:

  • tag là tên mà bạn muốn gán cho component đó.
  • options là một object chứa các tham số là template hay dữ liệu kèm theo.

Ví dụ: Mình sẽ đăng ký một component và gọi nó luôn ở trong ứng dụng

Nếu như bạn không muốn đăng ký một component ở trạng thái global nữa thì bạn cũng có thể đăng ký nó ở một phạm vi sử dụng nào đó (Vue.js gọi đó là local) thì bạn cũng có thể khai báo nó trong Vue instance.

Tổng kết

Bài này chúng ta đã được tìm hiểu sơ qua về component. Qua đó mình hy vọng rằng mọi người sẽ có được cái nhìn tổng quan về component và áp dụng nó vào trong các dự án của riêng bạn.

  Một vài khái niệm nâng cao trong React.js
  3 phút làm quen với Vue.js

Tài liệu tham khảo:

  • https://techtalk.vn/blog/posts/tim-hieu-component-trong-reactjs
  • https://toidicode.com/component-trong-vue-js-325.html