Component trong React, React Native

Nếu bạn đã từng sử dụng React - một thư viện javascript phổ biến giúp xây dựng các ứng dụng tương tác cao - để xây dựng các ứng dụng của mình thì chắc chắc các bạn biết rằng điểm đặc biệt nhất của nó chính là Component. Có thể coi component chính là trái tim, là tâm hồn của React. Là một lập trình viên React hay React Native (xây dựng các ứng dụng mobile) thì chắc chắn bạn nên có hiểu biết và nắm rõ về Component.

Trong bài viết này chúng ta sẽ tìm hiểu component là gì, tính chất, cách phân loại component và trường hợp sử dụng các loại component.

1. Khái niệm Component

Nói một cách đơn giản Component là một thực thể độc lập, các component thường không phụ thuộc lẫn nhau để có thể tái sử dụng. Nó mô tả một phần giao diện của ứng dụng và mỗi component sẽ thực hiện các nhiệm vụ riêng mà không cần quan tâm nó ảnh hưởng tới các thành phần khác như nào.

2. Props và State

Nhắc đến Component ta cần phải hiểu được khái niệm về props và state. Props và state được sử dụng rất nhiều trong các component, nó là hai kiểu để đưa dữ liệu vào trong Component.

a) Props

Props được chuyển đến component tương tự như cách một đối số được chuyển đến một hàm. Thực chất trong component cũng có thể có props mặc định, do đó nếu component không truyền vào props nào thì nó vẫn sẽ được thiết lập. Tóm lại Props có thể được truyền từ component cha hoặc là của chính nó (defaultProps)

Ở các phiên bản cũ hơn của React, ta có thể thay đổi props thông qua setProps hay replaceProps nhưng việc này gây ra vấn đề khó kiểm soát đầu ra và đầu vào dữ liệu cho component. Điều này có nghĩa là một component cha có thể truyền bất cứ dữ liệu nào nó muốn cho con của nó dưới dạng props, nhưng component con không thể sửa đổi props của chính nó. Ở các phiên bản mới đây của React khi chúng ta cố gắng chỉnh sửa các props thì sẽ nhận được lỗi "Cannot assign to read-only".

b) State

Cũng giống như props, state lưu trữ thông tin cho component chỉ khác là state thuộc sở hữu của component, là thành phần của component trong khi props lại được truyền từ bên ngoài vào. Khi truyền state của component cha cho component con thì state này lại là props cho component con.

Một chú ý là ta sẽ không gán lại giá trị cho state thông qua this.state mà sẽ dùng hàm setState, setState là một hàm bất đồng bộ do đó ta có thể sử dụng nhiều this.setState trong cùng một phạm vi mà không kích hoạt nhiều lần việc re-render lại toàn bộ cây.

3. Phân loại component

Để phân loại component, chúng ta thường có 2 cách phân loại chính:

- Theo kiểu component: Function component và class component

- Theo state: Stateful Component và Stateless component

a) Theo kiểu component

Chúng ta có thể viết component theo hai kiểu là function và class. Tùy thuộc vào mục đích sử dụng component mà chúng ta lựa chọn khai báo kiểu phù hợp. Với class component, component có thể có state và áp dụng được lifecycle method cho component, còn với function component thì component hoàn toàn không có state, dữ liệu chỉ được truyền vào thông qua tham số hàm.

Dưới đây là một ví dụ về class component và function component:

Mở rộng hơn, class component còn có thể chia nhỏ hơn là React component và pure component (chúng ta sẽ biết chi tiết về sự giống và khác nhau của chúng ở bài viết sau)b) Theo stateDựa theo việc có state hay không có state của component, ta có thể chia component thành hai loại:Stateful Component là component có chứa state (cần bộ nhớ)

Stateless component là component không chứa state (không cần bộ nhớ)

Mô hình trong react là theo hướng stateless component: giảm thiểu các stateful component mà cần kết hợp các stateless component lại với nhau. Thông thường thì chỉ có root component trong cấu trúc dạng tree mới chứa state và truyền nó xuống các component con.

Vậy Khi nào dùng stateless component. Chúng ta dùng stateless component khi:

• Không cần quản lý bất cứ state nào, component chỉ phụ thuộc vào props truyền vào
• Component là không bao giờ thay đổi chỉ hiển thị các thông tin cố định
• Stateless component thường viết dưới dạng function component. App nên hướng tới mục tiêu sử dụng các stateless component vì sẽ dễ dàng quản lý logic của app và dễ test hay tái sử dụng.

Nhược điểm của stateless component function là sẽ bị re-render khi component cha cập nhật mặc dụ chính nó không có thay đổi gì.

Như vậy là chúng ta đã hiểu phần nào về component trong react và react native. Mong rằng các bạn sẽ áp dụng được các kiến thức vào các ứng dụng của mình. Bài viết sau chúng ta sẽ làm rõ sự khác nhau giữa react component và pure component, ngoài ra chúng ta cũng tìm hiểu về React Fiber - bản tái cấu trúc lại thuật toán nền tảng của React.