Component là gì ?

Những framework và lib hiện nay đều theo xu thế viết component, vậy component là gì?
Đơn giản component là một class hoặc một function viết bằng javascript, nó có thể (hoặc không) nhận input, và trả về một element. Trong trường hợp React, component sẽ trả về một React Element, với input giống nhau thì output luôn giống nhau. Bên trong component là một hộp đen (black box).

Thử viết một component 😎

Component không nhận input:

const Hello = () => <div>Hello world !!!</div>

Component nhận input:

const Hello = (name) => <div>Hello {name} !!!</div>

Hai ví dụ trên là function component, vì hiện nay xu hướng của react là hook, nên blog sẽ viết toàn bộ ví dụ dưới dạng function component.

Có bao nhiêu loại component 🤔 ?

Về mặt vật lý (cách viết) thì có thể chia ra làm 2 loại Class Component (CC) và functional Component (FC). Khi chưa có react hook thì 2 loại component có một khác biệt cơ bản là FC không có state (stateless) còn CC thì có state (stateful). Nhưng hiện nay react hook cũng đã cung cấp state cho FC nên có thể coi là không còn khác biệt giữa FC và CC.

Do đó, ta có thể phân chia component theo cách sử dụng:

• stateless component: component không chứa logic bên trong nó, là mức cơ bản nhất của component. Chủ yếu là dùng để hiển thị lên UI (như ví dụ ở trên)
• stateful (smart) component: bên trong component này sẽ có đầy đủ state và lifecycle để thực hiện logic riêng của nó. Thường được dùng làm các container, chứa các component nhỏ hơn ở bên trong.

(còn tiếp … 😅)