Đừng để Component của bạn làm việc quá nhiều!

Các component chính là thành phần cốt lõi để tạo nên giao diện người dùng. Hiểu đơn giản nó như các mảnh lego dùng để tạo nên một mô hình hoàn chính, các mảnh lego các bé thì càng dễ tái sử dụng và quản lý ngược lại các mảnh lego to thì khả năng tái sử dụng thấp tương tự với component khi component của bạn quá lớn, quá nhiều hàm, quá nhiều state thì khả năng tái sử dụng của nó rất thấp, quá trình debug cũng khó khăn hơn

Hãy quan sát component sau:

Bạn có thể thấy rằng nó không phải làm một thành phần quá lớn, cũng chẳng làm nhiều việc, bạn click Button +1 đơn vị hoặc reset count = 0, nó cũng chỉ nhận một props từ component cha, thực tế nó không phải là một thành phần phức tạp nhưng trong cuốn sách Clean Code của Robert Martin ông đã khuyên rằng một hàm không nên làm quá nhiều công việc và tất nhiều component của mình không tuân theo nguyên tắc đó làm thế nào để tối ưu lại ?

Hãy quản lý State riêng biệt

Mình sẽ làm thế này :

Nhưng tối ưu hóa chưa cao và tính tái sử dụng vẫn còn thấp ^^:

Mình sẽ code theo parttern HOC.

Hãy custom style ở những component riêng biệt :