Cách tối ưu Component trong React Native

Giới thiệu

Để viết một ứng dụng bằng React Native rất đơn giản và nhanh chóng. Nhưng khi ứng dụng càng phức tạp thì việc tổ chức source code sao cho tối ưu và dễ đọc trở nên cực kì quan trọng. Bài viết này chúng ta sẽ cùng nhau tìm cách tối ưu component trong react native nhé.
Nếu trong các ngôn ngữ hướng đối tượng thì chúng ta có nguyên lý SOLID. Với Nodejs thì chúng ta có khái niệm Module để tối ưu hóa source code.
Với React native thì các component chính là yếu tố đầu tiên cần phải tối ưu thật tốt.
Mình đã làm việc với nhiều bạn developer với nhiều cách tổ chức mã nguồn khác nhau. Từ kiểu đặt tất cả mọi thứ vào trong một tệp, đến kiểu mỗi tệp chỉ có vài dòng code…
Bài viết này mình sẽ hướng dẫn các bạn một cách tiếp cận cân bằng. Cách tối ưu component trong react native để dễ đọc, dễ bảo trì nhưng không quá nặng nề về nguyên tắc.

Cách tối ưu Component trong React Native

Mặc dù bài viết này mình sẽ chỉ tập trung vào tối ưu Component, một khía cạnh của UI. Nhưng để có cái nhìn tổng thể cả dự án, chúng ta sẽ điểm qua cấu trúc một dự án React Native mà mình thường làm:

Triết lý tạo component trong react native

Để các bạn cùng hiểu điều mình diễn đạt, chúng ta sẽ thống nhất với nhau là khi mình nói đến Component tức là mình đang nói đến UI component trong ứng dụng của mình.
Các UI component thường chỉ xử lý việc hiển thị dữ liệu, không xử lý các logic business của ứng dụng.
Ví dụ: Mình có một màn hình đăng nhập với 3 text input và một button. Mình sẽ quy hoạch chỗ này như sau: Mình sẽ sẽ tạo một text input component để hiển thị dữ liệu và xử lý style.
Khi người dùng nhập liệu xong và nhấn vào button, thì dữ liệu trong text input component sẽ được đẩy lên màn hình để xử lý tiếp.
Đây chính là phương pháp mà mình sẽ thực hiện cho tất cả các compoment sau này.

Tổ chức mã nguồn theo tính năng

Khi ứng dụng của bạn phát triển, bạn sẽ ngày càng có nhiều component trong react native hơn. Và khi các component trở lên phức tạp hơn, bạn sẽ muốn chia nhỏ các component thành các phần nhỏ hơn để dễ maintain sau này.
Khi bạn làm như vậy thì có thể thư mục component sẽ trở nên cồng kềnh. Tuy nhiên, với mình thì nó vẫn ổn.

NHƯNG với cách tổ chức này, bạn sẽ khó có thể biết được sự liên quan giữa các component. Bạn thử tưởng tượng là style được chia sẻ giữa các card components, header components, form, list…
Vậy bạn sẽ đặt các phần được sử dụng chung đó ở đâu?

Chia nhỏ component thêm một level

Đây chính là lý do mình muốn chia nhỏ component trong react native hơn nữa.

So với cấu trúc source code ban đầu, mình đã phân chia thêm một cấp nhỏ hơn nữa. Tất nhiên là mình vẫn phân chia theo tính năng của từng component.
Bây giờ chúng ta cần tạo một style chung cho các component cùng loại thì cần đặt nó vào trong thư mục tương ứng là được.
Cuối cùng, mình muốn tạo một khu vực để export những tính năng cần thiết theo API (mục đích là để những thành phần khác có thể  truy cập được).
Khi bạn xuất thành API thì các thành phần bên ngoài không còn quan tâm đến cấu trúc bên trong của component đó nữa, bạn có thể đổi tên/tái cấu trúc comopent theo ý muốn.
Để làm được điều đó, mình sẽ tạo thêm một file index.js trong mỗi thư mục compoment.

Còn có một lợi ích nho nhỏ từ việc tạo file index.js như này đó làm giảm thiểu việc phải gọi nhiều import các component cùng loại trong một folder.
Thay vì phải gọi import từng component trong cùng folder form như này:

Thì bạn chỉ cần import một lần như này:

Tránh tạo component trong react native lồng nhau nhiều lần

Với phương pháp tổ chức mã nguồn như thế này, chúng ta nên tránh việc phân chia lồng nhau quá nhiều và sâu. Chỉ nên lồng nhau 1 level như mình làm thôi.
Mình lấy một ví dụ:
Giả sử chúng ta tạo một bộ màu chuẩn trong file config/colors.js. Và bạn muốn sử dụng bộ màu chuẩn đó trong conponent như TextInput.js

Bạn thấy không? Nếu bạn mà chia folder của component càng sâu thì khi import sẽ càng nhiều ../../../...
Mà cá nhân mình thấy càng nhiều ../ thì càng đau đầu phải đếm, dễ nhầm lẫn. Tốt nhất là nên tránh “lồng quá sâu”.

Tạm kết

Để kết thúc bài viết về cách tối ưu component trong react native, mình chỉ muốn nhắc nhở bạn rằng là mọi thứ phải linh hoạt. Có những thứ có thể hoạt động tốt với dự án của mình, nhưng lại không tốt với dự án của bạn.
Khi bạn tham gia vào dự án, bạn sẽ tự đúc kết được kinh nghiệm để ứng dụng linh hoạt cho dự án tiếp theo.
Cuối cùng, đừng dành quá nhiều thời gian chỉ để cố gắng tổ chức mã nguồn cho “Hoàn Hảo”. Mình đảm bảo, sau này khi nhìn lại mã nguồn, bạn vẫn sẽ thốt lên “Sao ngày xưa mình lại tổ chức như này”.
Vì vậy hãy cứ code như chỉ có ngày hôm nay mà thôi. Code hết trách nhiệm của một coder chân chính.