Cách tổ chức React Native Component tối ưu

0
1315

Để 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 mã nguồn React Native Component cho tối ưu.

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 (tham khảo bài viết về Module Node.js ở đây nhé) để 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ổ chức mã nguồn 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ổ chức React Native Component tối ưu

Component là gì?

Component là từ được dùng trong công nghệ thông tin mang ý nghĩa là bộ phận, thành phần hoặc yếu tố tổ chức của một hệ thống hoặc phần mềm.

Trong phần mềm, Component được gọi ra từ các chương trình khác, cho phép liên kết và sử dụng như một bộ phận trong chương trình.

Vậy Component React Native là gì? Việc chúng ta xây dựng trang web sử dụng những bộ phận nhỏ. Chúng ta có thể tái sử dụng một component ở nhiều nơi, với các trạng thái hoặc các thuộc tính khác nhau, bên trong mỗi React Component lại có thể chứa các thành phần khác.

Mỗi component trong React Native có thể thay đổi, được cập nhật component dựa trên những thay đổi của trạng thái.

#Cấu trúc dự án React Native Component

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:

Cấu trúc mã nguồn dự án React Native
Cấu trúc mã nguồn dự án React Native

Mình thích đặt các phần mã nguồn do mình viết vào trong thư mục app hoặc src. Điều này giúp mình dễ nâng cấp, mở rộng dự án sau này, đồng thời cũng giảm khả năng bị conflict.

#Triết lý tạo React Native Component

Để 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.

Dành cho bạn muốn tối ưu thêm cho ứng dụng React Native 6 cách đơn giản để tăng tốc độ React Native cho bạn

#Tổ chức mã nguồn React native Component 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.

Phân chia component react native theo chức năng

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.

Cách tổ chức React Native Component tối ưu

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 React Native 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.

Tạo API cho mỗi component react native

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:

Import React Native Component

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

import component

#Tránh tạo React Native Component 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

Cách tổ chức tối ưu

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ề tối ưu mã nguồn 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 🙂

Bình luận. Đặt câu hỏi cũng là một cách học

avatar
  Theo dõi bình luận  
Thông báo